您好我正在尝试了解Chrome(目标)和IE 7/8中此页面呈现的差异:
http://phor.net/PRIV/md2/ (it validates)
在IE 7中,顶部导航栏不会浮动LI,而在IE 8中,顶部有一个可怕的边距。
此页面非常简单,所有样式都在
中http://phor.net/PRIV/md2/style.css
有关如何修复该导航栏的想法吗?感谢您的帮助和讨论。
答案 0 :(得分:2)
IE7不完全支持您在导航栏上使用的内联块属性。
http://www.quirksmode.org/css/display.html
尝试使用浮点数。
#navbar ul li { float: left; }
确保你之后清理你的花车。
答案 1 :(得分:2)
IE7不支持inline-table
,您可以使用float: left;
或display: inline;
。
抱歉,IE8中看不到任何巨大的差距。
答案 2 :(得分:1)
使用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;}
答案 3 :(得分:1)
尝试
#navbar li { display:block; float:left; width:160px;}
#navbar ul { overflow:hidden;}
并删除所有display:inline-table
我为你做了一个例子