css - 带有嵌套 `overflow-x: hidden` 的列表隐藏了列表计数器/点 - 为什么/这是一个错误？

Question

http://jsfiddle.net/G46dK/

<ol>
    <li>
        <p>
            Moo
    <li>
        <p class="overflow-hidden">
            Moo
    <li>
        <p class="overflow-hidden">
            Moo
    <li>
        <p>
            Moo
</ol>

随附的 CSS:

p.overflow-hidden {
    overflow-x: hidden;
}

你会期待类似的东西

1. 哞
2. 哞
3. 哞
4. 哞

但是在我的 Safari 和 Chrome 上……“2”。和“3”。被隐藏(但他们的“Moo”仍然存在):

为什么溢出会影响列表计数器/点？它在 <p> 上列表中的标签...啊，它伤害了我的大脑><

我是不是疯了，还是这是一个错误？

如果这不是错误..有人能解释一下吗？

我想象了“2”。属于li而 overflow-x: hidden适用于 child p .因此即使是“2”。在p之外...它与 overflow-x: hidden 没有关系因此应该不受影响 - 但事实并非如此..这是怎么回事？

Answer 1

你的理解是正确的；列表编号(在 CSS 中称为列表 标记)应该存在于 p 之外，不在里面。即使您指定 list-style-position: inside 也应该是这种情况因为就像你说的，你正在对 p 应用溢出, 而不是 li .

一般来说，每个列表项都会为其子项创建一个主 block 框，并为标记所在的另一个框创建一个主 block 框。子元素都应该在主 block 框内呈现。来自CSS2.1 spec :

CSS 2.1 offers basic visual formatting of lists. An element with 'display: list-item' generates a principal block box for the element's content and, depending on the values of 'list-style-type' and 'list-style-image', possibly also a marker box as a visual indication that the element is a list item.

可以找到对主要 block 盒稍微更详细的解释here .

在你的例子中，每个 li创建一个主 block 框和一个标记框。 p.overflow-hidden元素应该驻留在主 block 框内并且不影响标记。这是一个粗略的 ASCII 艺术图来说明我的意思:

listmarker   li principal block box+-----+  +----------------------------+|     |  |+--------------------------+||  •  |  || Moo        (p block box) |||     |  |+--------------------------+|+-----+  +----------------------------+

现在，规范似乎对标记框本身的定位含糊不清，但它确实说当 list-style-position 时标记框与主 block 框是分开的。是outside .这似乎也意味着浏览器可以将标记框放置在主 block 框内，只要标记内容本身实际上位于该标记框内(顺便说一句，目前还不能用 CSS 作为目标)。

但 Safari 和 Chrome 似乎在做一些完全不同的事情:它们似乎不仅将标记框放在主框内，而且在主 block 框的第一个子框内。这就是为什么当它位于 p 之外时会被切断的原因 block 框:因为渲染引擎将其视为 p 的一部分content，看到它超出了它的水平边界，并将其切断。 (我怀疑它也被 overflow-y: hidden 剪掉了，因为它位于左边缘之外，这在 LTR 模式下通常不会发生，但这只是一个大胆的猜测。)

当您添加 list-style-position: inside 时到 li , 其他浏览器正确移动 p标记下方的 block 框，but Safari and Chrome simply move the marker into the p box .尽管 CSS2.1 说它没有定义列表标记相对于列表项的主要 block 框的确切位置，但它确实说明了 list-style-position: inside。 :

inside
The marker box is placed as the first inline box in the principal block box, before the element's content and before any :before pseudo-elements.

这显然不是 Safari 和 Chrome 对标记框所做的。

同样，规范(相当有意)不是 100% 清楚这一点，但我当然不希望列表标记是任何 li 的子项或受其影响。的子元素在 Safari 和 Chrome 中的显示方式。我很确定这是不正确的行为，即错误。