Html 列表编号的样式在IE中不起作用
我有一个列表,其中我对列表的编号进行了样式化,使其看起来与列表本身的内容不同。例如Html 列表编号的样式在IE中不起作用,html,css,internet-explorer,cross-browser,Html,Css,Internet Explorer,Cross Browser,我有一个列表,其中我对列表的编号进行了样式化,使其看起来与列表本身的内容不同。例如 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;
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为什么会忽略这些样式吗?我真的不知道它的部分原因,但IE会在
上的显示:表格单元格:在之前和::在伪元素之后
移除上的显示:表格单元格
。下拉菜单li ul li:before
并将其简化为显示:内联块代码>,瞧,你会在IE中看到颜色
演示:
顺便说一句:有什么具体原因吗,您需要在这些列表项和伪元素上使用表行
和表单元格
?将此添加到“引用此页面”-如果您可以将确切的HTML和CSS添加到JSFIDLE,此问题将在2分钟内得到解决。原因是,如果该列表编号的内容超过一行,则不会继续下的文本数字,而不是在文本的开头,您可以使用列表项上的负文本缩进来控制该数字。e、 这在IE中非常有效,但由于某些原因,文本缩进不能在Chrome中格式化文本。此外,我的一个列表中有一个列表,文本缩进然后将该列表缩进到与其父列表相同的位置,在Chrome上就可以了。我只用铬。关于你的另一个评论,在没有看到你的整个列表标记以及你真正想要的东西的情况下进行猜测是非常困难的。