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錯誤的保證金，其他好的

回答

相關問題