2

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

它在 Firefox、Chrome 和 IE8 中运行良好，但在 Opera 和 IE9 中出现故障。

哦，我不想使用 list-style-position: inside; 因为如果某些 <li> 更长，那么一行第二行的缩进不正确。

4

3 回答 3

2

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

您也许可以通过text-indent将第一行再次移回来解决它。

于 2012-06-16T11:19:10.867 回答
1

这也是困扰我一段时间的问题。

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

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

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

IMO Opera 和 IE9 使其更接近规范 - 即将标记......好吧......放在盒子外面。在浮动的情况下，由li元素组成的框仍然是全角的，只有内容在其中移动。

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

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

如果您对列表的未来实现感兴趣 - 您可以阅读CSS 列表和计数器模块第 3 级（目前为编辑草稿）。

于 2012-06-16T11:24:43.860 回答
0

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

  1. 使用列表样式位置：内部；。
  2. 要修复第二行和后续行的缩进，请使用负文本缩进（感谢乔伊！）
  3. 确定负文本缩进的正确值并不容易，因为每个浏览器的处理方式都略有不同。知道我们将需要使用可以手动设置标记宽度的东西。那东西是伪元素:before。（感谢skip405！）
  4. 使用 :before 伪元素和 content 属性的右值，我们现在可以使用 list-style-type: none;
  5. 从 1. 中删除 list-style-position，因为它现在没用了。

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

唯一的缺点是 content: counter(list, disc); 在 Opera 12 中。圆盘/圆形/方形值无法正常工作，十进制之类的值还可以。我已经将它报告为一个错误，所以希望它会在下一个版本中得到修复。

于 2012-06-19T11:38:32.533 回答