浮点在IE 7和IE 8中看起来有所不同（经HTML验证）

Question

Hello I am trying to understand differences in the rendering of this page in Chrome (the target) and IE 7/8:

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

In IE 7, the top navbar does not float the LIs and in IE 8, there's a hideous margin at the top.

This page is very simple, with all style in

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

Any idea on how to fix that navbar? Thank for your help and discussion.

Answer 1

IE7 does not fully support the inline-block property that you are using on your navigation bar.

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

Try using floats instead.

#navbar ul li { float: left; } 

Make sure you clear your floats afterward.

Answer 2

IE7 doesn't support inline-table , you could use float: left; or display: inline; .

Sorry, don't see any huge margin in IE8.

Answer 3

use float:left property instead of display:inline-table

Change this

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

to

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

Answer 4

try

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

and remove all display:inline-table

I make an example for you

Example