IE9和Opera中列表中的碎片

Question

我准备了这个演示： https://dl.dropbox.com/u/7224702/lists-bug.html

它在Firefox，Chrome和IE8中运行良好，但在Opera和IE9中已经破解。

哦，我不想使用list-style-position：inside;因为如果有些＆lt; li＆gt;比第一行没有正确缩进的行长一行。

Answer 1

这是CSS未真正指定的列表的问题。它只是说标记在框外，但没有精确指定在哪里。

您可以使用text-indent解决此问题，以便再次移回第一行。

Answer 2

这个问题一直困扰着我。

首先，如果我们查看描述list-style-position: outside属性的规范，我们将看到

  

“CSS 2.1未指定标记框的精确位置或   它在绘画顺序中的位置“。

这实际上使这种情况不是一个错误，只是不同的实现。

IMO Opera和IE9使它更接近规范 - 这就是把标记......好......在盒子外面。在浮动的情况下，li元素生成的框仍然是全宽的，只有内容在其内部移动。

我试图考虑其他解决方案，但它们仍然不合适并且导致比他们解决的问题更多的问题。在这里可以看到使用css3 counter increment的示例：http://jsfiddle.net/s3sZS/3/，但在视觉上看起来像list-style-position: inside（您的缩进问题仍然存在）并且增量本身是可选择和可复制的（至少在Opera中） ）。

实际上list-style-position: inside看起来是这个imo唯一合适的解决方案。

如果您对列表的未来实施感兴趣 - 您可以阅读CSS Lists and Counters Module Level 3（目前是编辑草案）。

Answer 3

稍后计划，但这是我的最终解决方案。

1. 使用list-style-position：inside;。
2. 要修复第二行和下一行的缩进，请使用否定文本缩进（感谢Joey！）
3. 确定负文本缩进的正确值并不容易，因为每个浏览器的处理方式都不尽相同。知道我们需要使用可以手动设置标记宽度的东西。那个东西是伪元素：之前。 （感谢skip405！）
4. 使用：之前的内容属性的伪元素和右值，我们现在可以使用list-style-type：none;
5. 从1开始删除list-style-position，因为它现在没用了。

您可以在此处查看工作演示： https://dl.dropbox.com/u/7224702/lists-counters.html

唯一的缺点是内容：counter（list，disc）;在Opera 12中，光盘/圆/方值不能正常工作，像十进制这样的值也没问题。我已经将它报告为一个bug，所以希望它将在下一个版本中修复。