问题:

I have a navigation bar at the top of a page. In FF and Chrome the navigation bar displays fine. However in IE8 (with or without compatibility) the UL seems to indent from the left hand side, not each li just the whole li; despite declaring

text-align:center; width:600px; margin:auto; padding-left:0;

Any ideas what could be causing this?

回答1:

margin-left:0px;

In Firefox the UL is padded left by default, in IE it has a left margin.

Example:

<html>
<head>
<style>

ul{
border:1px solid red;
margin:0px;
list-style:none;
padding:0px;
}

li{
border:1px solid green;
margin:0px;
}

</style>
</head>
<body>

<ul>
<li>this</li>
<li>that</li>
<li>these</li>
<li>those</li>
</ul>

</body>
</html>

回答2:

I just used ul { list-style-position:outside; } to fix the indent in IE.

回答3:

I think it should be:

ul { padding: 0; margin: 0 } 
li { padding: 0; }

回答4:

Using list-style-position:outside; specifically for IE6/IE7 worked for me. However, note that this may only be necessary if you're using list-style-position:inside; for other browsers and simply hiding the default list margin/padding by setting them to 0. Working with IE requires some finesse, and a lot of browser-specific CSS.