Float 在 IE 7 和 IE 8 中看起来不同（经过 html 验证）答案

【问题标题】：Float looks different in IE 7 and IE 8 (html validated)Float 在 IE 7 和 IE 8 中看起来不同（经过 html 验证）
【发布时间】：2011-11-14 14:20:45
【问题描述】：

您好，我正在尝试了解此页面在 Chrome（目标）和 IE 7/8 中呈现的差异：

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

在 IE 7 中，顶部导航栏不会浮动 LI，而在 IE 8 中，顶部有一个可怕的边距。

这个页面很简单，所有样式都在

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

知道如何修复该导航栏吗？感谢您的帮助和讨论。

【问题讨论】：

【解决方案1】：

IE7 不完全支持您在导航栏上使用的 inline-block 属性。

尝试使用浮点数。

#navbar ul li { float: left; }

确保你之后清除你的花车。

【讨论】：

【解决方案2】：

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

抱歉，在 IE8 中没有看到任何巨大的余量。

【讨论】：

【解决方案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;}

【讨论】：

【解决方案4】：

试试

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

并删除所有display:inline-table

我给你举个例子

【讨论】：