列表項的縮進不適用於IE，不適用於Firefox，Safari和Chrome

Question

我的CSS代碼清單有問題。 列表項的第二行（以及更多行）的縮進在IE中不正確，但在其他瀏覽器中還可以。 請參閱： http ： //jsfiddle.net/nXYee/

任何想法？

IE8給出以下結果：

Chrome，Safari和FF提供以下結果：

Answer 1

發生這種情況是因為您已將項目符號放置在列表項中（ list-style-position:inside; ），並且瀏覽器控制項目符號和li內容之間的空間，而不是您。 與您提到的其他瀏覽器相比，Internet Explorer在項目符號和內容之間分配的空間更大。

縮進的內容在Chrome / Safari / Firefox中正確對齊的事實是因為這些瀏覽器都在子彈和li內容之間實現了相同（或相似）的距離，所以text-indent為1em會為您帶來視覺上一致的結果- 但是實際上，這種視覺一致性只是consistency幸 。

（實際上，如果仔細檢查，您會發現Firefox也略顯不足）。

如果您覺得有必要在列表項中顯示項目符號，那么您可能會發現需要使用條件注釋將不同的text-indent和padding-left值提供給IE（例如1.5em / -1.5em ）-但是它將在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上測試過，看起來很正常。

http://jsfiddle.net/nXYee/1/

Answer 3

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

解決了我遇到過類似的問題

Answer 4

我敢肯定，這與您的樣式有關，尤其是這部分：

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/