DOCTYPE HTML會導致意外的問題，IE8與內聯li呈現

我正在一個頁面上，我想要顯示一個菜單（一堆鏈接），其中的菜單項水平放置和位於頁面的右側（類似於您在登錄時已經在stackoverflow頁面頂部看到的內容）。DOCTYPE HTML會導致意外的問題，IE8與內聯li呈現

的HTML看起來像這樣：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css">@import url(styles/style.css);</style> 
    </head> 
    <body > 
     <div class="test"> 
      <!-- float right --> 
      <ul class="fr"> 
       <li><img src="images/1.gif" alt="image 1"/></li> 
       <li><img src="images/2.gif" alt="image 2"/></li> 
       <li><img src="images/3.gif" alt="image 3"/></li> 
      </ul> 
     </div> 
    </body> 
</html>

「測試」 CSS類如下：

.test ul {list-style:none; } 
.test li { display:inline;}

這說明了在Chrome和Firefox的罰款。 li項目以內聯方式呈現在頁面的右側，全部在一行上。

但是，在IE8上，這些元素在頁面的右側呈現一個在另一個之下。

我開始尋找到什麼是通過一次取出一條線造成這一點，並意識到擺脫的：

<!DOCTYPE HTML>

從HTML頁面，使這一優良顯示，即使在IE8。有沒有人知道當頁面上出現什麼問題？

當然，這只是我的頁面的一個精簡版本，我確實希望在我的頁面中使用HTML5功能，所以只是刪除它似乎不是解決方案。

來源

2013-10-14 Vincent

我想這就是IE8中的display: inline的bug。嘗試使用：

.test li {display: inline-block; }

來源

2013-10-14 08:27:10

哈！這工作。謝謝！當然，它現在顯示有它自己的一套問題，因爲如果我在一個li中渲染多於一個元素，則內容呈現爲塊（這當然是內聯塊應該做的）。但我想我可以和它一起生活，或者找到別的竅門來克服它。我不能相信任何事情會如此簡單。順便說一句，你有沒有鏈接到IE中的這個錯誤，我只是想在代碼中留下一個筆記，以供任何其他人使用該代碼。 – Vincent

檢查這篇文章 - http://stackoverflow.com/q/9110646/1679863 –

你也可以嘗試'float：left;'。可能是那樣做會完成這項工作。 –

DOCTYPE HTML會導致意外的問題，IE8與內聯li呈現

回答

相關問題