列出在Internet Explorer中无法正确显示的项目符号

Question

我有<ol>一些<li>内容,在FF中它看起来不错,但由于某种原因在IE中它看起来像这样:

HTML:

 <ol start="1">
   <li>Free gifts click here</li>
   <li>Free gifts click here</li>
   <li>Bonus gifts</li>
 </ol>

CSS:

ol {
    list-style: none outside none;
}
li {
    list-style: decimal outside none;
    margin-left: 30px;
    margin-bottom: 12px;
}

任何的想法？

谢谢,

Answer 1

hasLayout在这里涉及它的原因是<ol>没有正确编号以及其他一些列表奇怪,你需要为列表发布更多的CSS,这样我们就可以看到你的案例是否有解决方法,但同时这里的代码这将重现它

ol {
    list-style: none outside none;
    background: #444;
    color: #fff;
}
li {
    list-style: decimal outside none;
    margin-left: 30px;
    margin-bottom: 12px;
    zoom: 1;
}

关键是要保持hasLayout关闭li元素,为了做到这一点,你必须使它,所以IE不必做任何计数!,在这种情况下左边距意味着它必须计算来计算宽度 - 所以如果那些列表中的项目是链接,也许你可以删除左边距li并添加填充到链接？

虽然确实需要更多的用例代码

更新:

有序的一些问题;列表是不可治愈的,推荐的解决方案是将ola包括div并应用任何宽度和颜色,以及嵌套元素(如内部链接)的任何高度,以便列表元素本身可以保留默认

见列表部分; 在布局上

其中有些问题是无法治愈的,所以当标记所需,最好避免在列表和列表元素的布局.如果需要应用某个维度,则最好将其应用于其他元素:例如,可以将宽度应用于外部包装,并将高度应用于每个列表项的内容.

所以记住这一点并假设你列出的元素确实包含链接(他们确实说点击这里;))

div {
  width: 180px;
  overflow: hidden;
  background: #444;
  color: #fff;
}

ol {
  padding: 0 0 0 30px;
  margin: 0;
}
li {
  margin-bottom: 12px;
}

a { 
  background: #444;
  color: #fff;
  text-decoration:none;
  display: block;
  line-height: 30px;
}

a:hover {
  color: #444; 
  background: #fff;
}

同

<div>
 <ol start="1">
   <li><a href="#">Free Gifts Click Here</a></li>
   <li><a href="#">Free gifts click here</a></li>
   <li><a href="#">Bonus gifts</a></li>
 </ol>
</div>