Internet Explorer错误的保证金，其他好的

我遇到了一个小问题。第一次，我正在做一个右箭头弹出的UL菜单......没有JS。Internet Explorer错误的保证金，其他好的

我遇到了一个小问题。在IE浏览器中... IE显示的边距为2px的#subMenu ul li（所以我们看到页面背景）。在其他大衣里，一切都很好。

另外，我想看看UL的右边的PNG。如果UL是0px-100px，那么图片会出现在左边100px-122px。 IE不显示图片，其他的。

好：FF 9.0.1，Safari浏览器5.1.2，歌剧11.60，Chrome浏览器16.0.912.75 错误：IE 9.0.4

我曾尝试这一点，但...边境出错此：

#subMenu ul li{ 
    list-style-type: none; 
    margin: -2px; 
}

这里是我的意思图片：http://i44.tinypic.com/6poy8i.jpg 这里的测试页：

<html> 
    <head> 

     <style> 
     html, body{ 
      margin: 0px; 
      padding: 0px; 
      font-family: Arial; 
      font-size: 12px; 
     } 

     #wrapper{ 
     } 

     #subMenu{ 
      padding: 5px; 
     } 

     #subMenu .wrapMenu{ 
      width: 180px; 
     } 

     #subMenu ul{ 
      list-style-type: none; 
      width: 100%; 
      padding: 0px; 
      margin: 0px; 
      height: auto; 
     } 

     #subMenu ul li{ 
      list-style-type: none; 
      margin: 0px; 
     } 

     #subMenu ul li:hover{ 
      width: 100%; 
     } 

     #subMenu ul li a, 
     #subMenu ul li a:link, 
     #subMenu ul li a:visited{ 
      text-decoration: none; 
      color: #b9b9b9; 
      display: block; 
      background-color: #f5f5f5; 
      border-left: 1px solid #c3c3c3; 
      border-bottom: 1px solid #c3c3c3; 
      border-right: 1px solid #c3c3c3; 
      width: 100%; 
      height: 48px; /* padding-top + padding-bot + height de ul li span*/ 
     } 

     /*f9f9f9*/ 
     #subMenu ul li a:hover{ 
      color: #7a7a7a; 
      border-right: 0px; 
      background-color: #f9f9f9; 
     } 

     #subMenu ul li span{ 
      width: 100%; 
      float: left; 
      height: 20px; 
      display: block; 
      padding: 14px 6px 14px 20px; 
     } 

     #subMenu ul li span:hover{ 
      background: transparent url('subMenu_Arrow.png') no-repeat 180px 0px; 
     } 

     #subMenu ul li a.first{ 
      border-top-left-radius: 3px; 
      border-top: 1px solid #c3c3c3; 
     } 

     #subMenu ul li a.last{ 
      border-bottom-left-radius: 3px; 
     } 

     </style> 
    </head> 

    <body> 
     <div id="subMenu"> 
      <div class="wrapMenu"> 
       <ul> 
        <li><a class="first" href="#"><span>Arrêts</span></a></li> 
        <li><a href="#"><span>Avis</span></a></li> 
        <li><a href="#"><span>Planibus</span></a></li> 
        <li><a class="last" href="#"><span>Trajets</span></a></li> 
       </ul> 
      </div> 
     </div> 

    </body> 
</html>

感谢您帮助。

来源

2012-01-11 David Bélanger

您需要指定doctype作为标记中的第一行。如果没有doctype，IE将呈现在quirks mode中，这实际上是IE 5.5渲染引擎。怪癖模式极大地影响了盒子模型等等。

例子：

<!doctype html>

指定doctype将产生在你的屏幕截图正确的结果。

来源

2012-01-11 15:22:50 wsanville

哈哈，你今天教给我一些东西！这太愚蠢了......我从来没有想过IE会这样做。我应该开始在我的真实网页上工作，而不是测试页面。指出。谢谢！我会尽快接受。即使经过6年的网络发展，我们总是会学到如此愚蠢但重要的事情！ – 2012-01-11 15:26:26

很高兴帮助！事实证明，这里的很多“WTF IE”问题可以通过指定'doctype' :)来回答 – wsanville 2012-01-11 17:18:08

Internet Explorer错误的保证金，其他好的

回答

相关问题