CSS 导致 UL 在 IE 中缩进太多答案

【问题标题】：CSS causing an UL to be indented too much in IECSS 导致 UL 在 IE 中缩进太多
【发布时间】：2014-01-01 06:55:25
【问题描述】：

我在页面顶部有一个导航栏。在 FF 和 Chrome 中，导航栏显示正常。但是在 IE8（有或没有兼容性）中，UL 似乎从左侧缩进，而不是每个 li 只是整个 li；尽管声明

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

任何想法可能导致这种情况？

【问题讨论】：

标签： html css internet-explorer html-lists

【解决方案1】：

margin-left:0px;

在 Firefox 中，UL 默认向左填充，在 IE 中，它有一个左边距。

例子：

<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】：

我刚刚使用了 ul { list-style-position:outside; } 来修复 IE 中的缩进。

【讨论】：

竖起大拇指。我得到的大多数答案都是 margin:0, padding 0。这也是 IE 所需要的，这样它就可以像其他浏览器一样工作。
我总是忘记这个愚蠢的部分，然后在未来几个月重新审视这个问题 - 好帖子。

【解决方案3】：

我认为应该是：

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

【讨论】：

【解决方案4】：

专门为 IE6/IE7 使用 list-style-position:outside; 对我有用。但是，请注意，这可能只有在您将 list-style-position:inside; 用于其他浏览器并通过将默认列表边距/填充设置为 0 来隐藏默认列表边距/填充时才需要。使用 IE 需要一些技巧，以及大量特定于浏览器的 CSS .

【讨论】：