在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不完全支持您在导航栏上使用的内联块属性。

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

我为你做了一个例子

Example