Html IE9和Opera中的断开列表

我准备了这个演示：

它在Firefox、Chrome和IE8中运行良好，但在Opera和IE9中则失效

---

哦，我不想使用列表样式的位置：内部；因为如果某些

比一行长，则第二行的缩进不正确。

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

---

你也许可以用

文本缩进

来解决这个问题，把第一行移回去。

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

首先，如果我们查看描述

列表样式位置：outside

属性的规范，我们将看到

“CSS 2.1没有指定标记框或 它在绘画秩序中的地位”

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

IMO Opera和IE9使其更接近规范-即放置标记。。。好。。。在盒子外面。在浮动的情况下，

li

元素生成的框仍然是全宽的，只有内容在其内部移动

我试图想出其他的解决办法，但结果仍然是不合适的，造成的问题比解决的问题还多。这里可以看到一个使用css3的示例：，但从视觉上看，它看起来像是

列表样式位置：inside

（缩进问题仍然存在），并且增量本身是可选择和可复制的（至少在Opera中）

实际上，

list-style-position:inside

看起来是这个imo唯一合适的解决方案

---

如果您对列表的未来实现感兴趣，您可以阅读（当前编辑的草稿）。

稍晚一点，然后再计划，但这是我的最终解决方案

使用列表样式位置：内部

要修复第二行和以下行的缩进，请使用负文本缩进（谢谢Joey！）

要确定负文本缩进的正确值并不容易，因为每个浏览器的操作都略有不同。知道我们需要使用一些可以手动设置标记宽度的东西。这是伪元素：在之前。（谢谢skip405！）

使用：before伪元素和content属性的right值，我们现在可以使用列表样式类型：none

从1中删除列表样式位置。因为现在没用了

您可以在此处看到工作演示：

---

唯一的缺点是内容：计数器（列表、光盘）；在歌剧12中。圆盘/圆/正方形的值不能正常工作，像十进制这样的值也可以。我已经将它报告为一个bug，希望它能在下一个版本中得到修复。

+1对于演示，但是对于没有Opera/MSIE的人来说，如果你能描述这个错误就好了。这不是那么容易描述的，我不认为有人能在不实际看到它的情况下仅仅通过描述就解决它。哇！我不知道文本缩进属性也可以有负值。有了这个，我也许可以解决这个问题。我希望明天能发布解决方案。谢谢！：-）我还没有弄清楚如何可靠地定位第一行，使其与后续行对齐。在IE上，它似乎需要一个

文本意图

值，大约为

-1.3

，但不完全如此。对于我来说，除了IE9之外，1em在所有浏览器中都可以正常工作。无论如何，我可能可以使用：before和counters来修复它。不过我还没来得及试试。我知道计数器，而且我确实经常使用它们。无论如何，这并不是我问题的答案，但你确实提供了一个非常有用的分析。我可能会将计数器与上面提到的文本缩进解决方案结合起来。谢谢！：-）是的，乔伊提出的解决方案绝对值得一试（我自己也投票给他：））唯一需要解决的问题是距离。。。因为同样-标记和文本之间的距离因浏览器而异。是为Opera 12设计的，在Firefox中或多或少都能正常工作，但在Chrome或IE中却失败了——结果不同。