列表与嵌套`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>位于列表中的标签上...它会伤害我的大脑> <

我会失去理智,还是这个错误？

如果它不是一个bug ..是否有人能够解释它？

我想象着"2".属于,li而overflow-x: hidden适用于孩子p.因此即使"2" 在p...... 之外它与它没有任何关系,overflow-x: hidden因此不应该受到影响 - 但情况并非如此......情况如何？

Answer 1

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

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

CSS 2.1提供了列表的基本可视格式.带有'display:list-item' 的元素为元素的内容生成一个主要的块框,并且根据'list-style-type'和'list-style-image'的值,可能还有一个标记框作为视觉指示元素是列表项.

可以在此处找到有关主要块框的更详细说明.

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

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

现在,该规范似乎含糊的标记框本身的定位,但它说,标记框是指从块框分开list-style-position是outside.它似乎也意味着浏览器可以放弃将标记框放在主要块框中,只要标记内容实际上驻留在该标记框中(顺便说一下,它不能用CSS作为目标).

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

当您添加list-style-position: inside到li其他浏览器时,其他浏览器会正确地移动p标记下方的块框,但Safari和Chrome只是将标记移动到p框中.尽管CSS2.1表示它没有定义列表标记相对于列表项的主要块框的确切位置,但它确实说明了这一点list-style-position: inside:

inside
标记框作为主要块框中的第一个内联框放置,在元素的内容之前和任何前面的伪元素之前.

这显然不是Safari和Chrome使用标记框进行的操作.

同样,规范(相当刻意)并非100%清楚这一点,但我绝对不会期望列表标记是liSafari中出现的任何子元素的子元素或受其影响.和Chrome.我很确定这是不正确的行为,即一个错误.