Question

我有一个列表，其中我将列表的编号设置为与列表本身的内容不同。 E.g

1 Monday
2 Tuesday

其中数字1和2的样式为绿色，内容为白色。这适用于Chrome，但出于某种原因，IE不会选择样式并将数字设置为白色。这是列表的样式

 dropdown-menu li ul { font-family:Arial; font-size:12px; color:#cecece; list-    style-type:decimal; margin-top: 10px; margin-left:30px; margin-right:40px; counter-reset: item; display: table; margin-left:0; padding:0;}
.dropdown-menu li ul li { font-family:Arial; font-size:12px; margin-top: 2px; display: table-row; position:relative; list-style:none; margin:2px 0 6px 2em; margin-bottom:10px;}
.dropdown-menu li ul li:before { color:#ad0c10 !important; content:     counters(item, ".") " "; counter-increment: item; display: table-cell; text-align:right; padding-right:10px; width:2em; top:-2px; left:-2em; margin-right:10px; color:#ad0c10 !important; }
.header { font-family:Arial; font-size:12px; color:#ad0c10; list-style-type:decimal; margin:10px 0px 0px 40px; text-transform:uppercase; color:#ad0c10; }
.header ul li { font-family:Arial; font-size:12px; color:#cecece; margin-top: 2px; text-transform:none; }

任何想法为什么IE可能会忽略这些样式？

Answer 1

我真的不知道 为什么 的一部分，但IE在display: table-cell ::before和::after伪元件。

删除display: table-cell上的.dropdown-menu li ul li:before，然后将其设为display: inline-block;，瞧，你会看到IE中的颜色！

演示：http://jsfiddle.net/abhitalks/r9rD6/2/

BTW：任何具体原因，您需要table-row和table-cell这些列表项和伪元素吗？

列表编号的样式在IE中不起作用

1 个答案: