<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：隐藏无关,因此不应该受到影响 – 但事实并非如此……情况如何？
解决方法
每个列表项通常为其子项创建一个主要块框,并为该标记创建另一个框.子元素应全部在主体块框中呈现.从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中看起来一样.铬.我很确定这是不正确的行为,即一个错误.
