浮點在IE 7和IE 8中看起來有所不同（經HTML驗證）

Question

您好，我試圖了解此頁面在Chrome（目標）和IE 7/8中的呈現差異：

http://phor.net/PRIV/md2/ (it validates)

在IE 7中，頂部導航欄不會浮動LI，而在IE 8中，頂部則有一個空白。

此頁面非常簡單，所有樣式都在

http://phor.net/PRIV/md2/style.css

關於如何修復該導航欄的任何想法？ 感謝您的幫助和討論。

Answer 1

IE7不完全支持您在導航欄上使用的inline-block屬性。

http://www.quirksmode.org/css/display.html

嘗試改用浮點數。

#navbar ul li { float: left; } 

確保之后清除浮標。

Answer 2

IE7不支持inline-table ，您可以使用float: left; 或display: inline; 。

抱歉，在IE8中看不到任何豐厚利潤。

Answer 3

使用float:left屬性代替display:inline-table

改變這個

#navbar li {
font: 14px Arial;
margin: 0;
margin-right: -2em;
list-style-type: none;
display: inline-table;
}

至

#navbar li {
font: 14px Arial;
margin: 0;
list-style-type: none;
float:left;
Padding:0px 10px 0px 10px;}

Answer 4

嘗試

#navbar li { display:block; float:left; width:160px;}
#navbar ul { overflow:hidden;}

並刪除所有display:inline-table

我為你舉例

例