列出在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中删除左边距并改为添加填充到链接中？

确实需要更多用例的代码

---

更新

有序的一些问题;列表无法解决，建议的解决方案是将ol包裹在div中并对其应用任何宽度和颜色，以及嵌套元素的任何高度（比如内部链接），以便列表元素本身可以保留为默认值

请参阅列表部分; On Having Layout

  

其中一些问题不可能   固化，所以当需要标记时   最好避免列表上的布局   和列表元素。如果有必要的话   要应用某些维度，这是   更好地应用于其他元素：for   例如，宽度可以应用于   外部包装，和一个高度   每个列表项的内容。

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

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>

Answer 2

您可以尝试将属性float: left;添加到每个li：

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

<小时/> 修改：此外，为了将来参考，您可能想要制作它，只是如果您为li添加未来规则，它们将不会重叠，ol li仍然是最具体的。

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