Question

我的CSS代码列表有问题。在IE中，第二行（和更多行）列表项的缩进不正确，但在其他浏览器中也没问题。请参阅：http://jsfiddle.net/nXYee/

有什么想法吗？

IE8给出了这个结果：

Result in IE

Chrome，Safari和FF会给出以下结果：

Result in other browsers

Answer 1

这是因为您已将项目符号放在列表项（list-style-position:inside;）中，而浏览器控制项目符号和li内容之间的空间，而不是您。与您提到的其他浏览器相比，Internet Explorer在项目符号和内容之间分配的空间更多。

您的缩进内容在Chrome / Safari / Firefox中正确对齐的事实是因为这些浏览器在子弹和li内容之间实现了相同（或类似）的距离，因此text-indent 1em }给你一个视觉上一致的结果 - 但实际上这种视觉一致性只是一个侥幸。

（事实上，如果你仔细检查一下，你会注意到Firefox也有点偏差）。

如果您觉得有必要在列表项中显示项目符号，那么您可能会发现需要使用条件注释来向IE提供不同的text-indent和padding-left值（例如{{ 1}} / 1.5em） - 但这将在IE10中中断，IE10不支持条件注释。

就个人而言，我会将子弹保留在列表项之外，因为我认为你会发现获得一致结果更容易。

Answer 2

嗯，看起来你在css方面对所有列表位置和负文本边缘进行了一些过度思考，我将其简化为以下内容：

body {
  font-family:verdana;
  font-size:1.0em;
  width:500px;
}

ul {
  list-style-type:disc;
  padding-left:1em;
  margin-left:0px;
}

在IE8上测试过，看起来很正常。

Answer 3

我很确定它与你的风格有关，特别是这部分：

li {
    list-style-position:inside;
    ...
}
ul {
    text-indent:-1em;
    padding-left:1em;
    ...
}

当list-style-position设置为inside时，它被视为列表项本身的一部分，当项目换行时，它将换行到项目标记下。然后由于你的左边填充设置而缩进 - 但是它不足以使它达到正确的水平。 FF和Webkit可能会使用其他一些算法来确定位置，或者1em只是以不同的方式进行评估。

我已经分叉你的jsfiddle并修复了它的样式，以便现在正确显示列表： http://jsfiddle.net/8vxTw/3/

Answer 4

ul {
    list-style-position: outside !important;
}

修正了我有类似的问题