css – 列表与嵌套`overflow-x：hidden`隐藏列表计数器/点 – 为什么/这是一个错误？

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;
}

你会期待类似的东西

> Moo
> Moo
> Moo
> Moo

但在我的Safari和Chrome上……“2”和“3.”是隐藏的(但他们的“Moo”仍在那里)：

为什么溢出会影响列表计数器/点？它位于< p>列表中的标签…它会伤害我的大脑>< 我是否会失去理智,或者这是一个错误？ 如果它不是一个bug ..是否有人能够解释它？ 我想象着“2.”属于li而overflow-x：hidden应用于子p.因此即使“2”在…之外它与溢出-x：隐藏无关,因此不应该受到影响 – 但事实并非如此……情况如何？

解决方法

你的理解是正确的;列表编号(在CSS中称为列表标记)应该存在于p之外,而不是在其中.即使你指定了list-style-position：inside也应如此,因为就像你说的那样,你将溢出应用于p,而不是li.

每个列表项通常为其子项创建一个主要块框,并为该标记创建另一个框.子元素应全部在主体块框中呈现.从CSS2.1 spec：

CSS 2.1 offers basic visual formatting of lists. An element with ‘display: list-item’ generates a 07001 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.

可以在here找到对主要块方框稍微更详细的解释.

在您的情况下,每个li创建一个主要块框和一个标记框. p.overflow-hidden元素应位于主块框中,不会影响标记.这是一个粗略的ASCII艺术图表来显示我的意思：

list
marker   li principal block Box
+-----+  +----------------------------+
|     |  |+--------------------------+|
|  •  |  || Moo        (p block Box) ||
|     |  |+--------------------------+|
+-----+  +----------------------------+

现在,规范似乎模糊了标记框本身的位置,但它确实说当标记样式位置在外面时标记框与主要块框分开.它似乎也意味着浏览器可以放弃将标记框放在主要块框中,只要标记内容实际上驻留在该标记框中(顺便说一下,它还不能用CSS作为目标).

但Safari和Chrome似乎完全不同：它们似乎不仅将标记框放在主框内,而且放在主要框的第一个子框内.这就是为什么当它位于p块框之外时会被切断：因为渲染引擎将其视为p内容的一部分,看到它超出了它的水平边界,并将其切断. (我怀疑它会被溢出y剪辑：隐藏也是因为它位于左边缘之外,这通常不应该在LTR模式下发生,但这只是一个疯狂的猜测.)

当你向li添加list-style-position：inside时,其他浏览器会正确地移动标记下面的p块框,but Safari and Chrome simply move the marker into the p box.虽然CSS2.1说它没有定义列表标记相对于标记的确切位置列表项的主要块框,它确实说明了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中看起来一样.铬.我很确定这是不正确的行为,即一个错误.

原文地址：https://www.jb51.cc/css/215334.html