列表与嵌套`overflow-x：hidden`隐藏列表计数器/点 - 为什么/这是一个错误？ [英] List with nested `overflow-x: hidden` hides list counter/point - why/is this a bug?

问题描述

：

CSS 2.1提供了列表的基本可视化格式。具有display：list-item的元素会生成 principal block box 作为元素的内容，根据'list-style-type'和'list-style-image'的值，还可能有一个标记框作为元素是列表项的可视指示。

可以在这里。

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

 
 list 
标记li主要块框
 + ---- + + ---------------------------- + 
 | | | + -------------------------- + | 
 | •| || Moo（p块框）|| 
 | | | + -------------------------- + | 
 + ----- + + ---------------------------- + 
 

现在，规范似乎模糊了标记框本身的位置，但它确实说明标记框与主框区分开 list-style-position 是 outside 。它似乎暗示，浏览器可以放弃标记框在主要块框中，只要标记内容实际上驻留在该标记框中（顺便说一下，目前还不能使用CSS作为目标）。

但是Safari和Chrome似乎做的完全不同：他们似乎把标记框不仅在主框中，而且在主要块框的第一个子元素内 。这就是为什么当它位于 p 块框之外时会被切断的原因：因为渲染引擎将它视为 p 内容，看到它的水平边界，并切断它。 （我怀疑它被修剪的 overflow-y：hidden 以及，因为它的位置超出左边缘，这通常不会发生在LTR模式，但这只是一个野猜测。）

在 li中添加 list-style-position：inside ，其他浏览器会正确移动标记下方的 p 框框，但Safari和Chrome只是将标记移动到 p 框。虽然CSS2.1说，它没有定义列表标记相对于列表项的主体块框的确切位置，但它确实说明 list-style-position：inside ：

内部

标记框被放置为第一个内嵌框中，在元素的内容之前和之前的任何：before伪元素。

这显然不是Safari和Chrome

同样，规范（非故意）不是100％清楚这一点，但我不会指望列表标记是一个 li 的子元素的子元素，或受其影响的元素。我很确定这是不正确的行为，即一个错误。

http://jsfiddle.net/G46dK/

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

With the accompanying CSS:

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

You'd expect something like

1. Moo
2. Moo
3. Moo
4. Moo

but on my Safari and Chrome... the "2." and "3." are hidden (but their "Moo" is still there):

Why does the overflow affect the list counter/point at all? It's on a <p> tag that's inside the list... agh it hurts my brain ><

Am I losing my mind, or is this a bug?

If it's not a bug.. is anybody able to explain it?

I imagined the "2." belongs to the li whereas the overflow-x: hidden is applied to the child p. As such even though the "2." is outside the p... it's got no relationship with the overflow-x: hidden and should therefore be left unaffected - but that's not the case.. What is the case?

解决方案

Your understanding is correct; the list number (known in CSS as a list marker) should exist outside the p, not inside it. That should be the case even if you specify list-style-position: inside because like you said, you're applying overflow to the p, not the li.

Every list item in general creates a principal block box for its children, and another box for the marker to reside in. The child elements should all be rendered within the principal block box. From the 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.

A slightly more detailed explanation of principal block boxes can be found here.

In your case, each li creates a principal block box and a marker box. The p.overflow-hidden elements should reside in the principal block box and not affect the marker. Here's a crude ASCII art diagram to show what I mean:

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

Now, the spec seems vague about the positioning of the marker box itself, but it does say that the marker box is separate from the principal block box when list-style-position is outside. It does seem to imply also that a browser could get away with placing the marker box in the principal block box so long as the marker content actually resides by itself in that marker box (which, incidentally, cannot be targeted with CSS as yet).

But Safari and Chrome appear to be doing something very different altogether: they seem to be putting the marker box not only within the principal box, but within the first child of the principal block box. That's why it gets cut off when positioned outside the p block box: because the rendering engine sees it as part of the p content, sees that it's out of its horizontal bounds, and cuts it off. (I suspect it gets clipped with overflow-y: hidden as well because it's positioned beyond the left edge, which shouldn't normally happen in LTR mode, but that's just a wild guess.)

When you add list-style-position: inside to the li, other browsers correctly shift the p block box beneath the marker, but Safari and Chrome simply move the marker into the p box. Although CSS2.1 says that it doesn't define the exact position of a list marker with respect to the list item's principal block box, it does say this about 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.

That's clearly not what Safari and Chrome are doing with the marker box.

Again, the spec is (rather deliberately) not 100% clear about this, but I would certainly not expect the list marker to be a child of, or be affected by, any of the li's child elements the way it appears to in Safari and Chrome. I'm pretty sure this is incorrect behavior, i.e. a bug.

这篇关于列表与嵌套`overflow-x：hidden`隐藏列表计数器/点 - 为什么/这是一个错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！