<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;
}
你会期待类似的东西
但在我的 Safari 和 Chrome 上……“2”。和“3”。是隐藏的(但他们的“Moo”还在那里):
为什么溢出会影响列表计数器/点？它在列表内的
<p>标记上……这伤了我的大脑> <我是疯了，还是这是一个错误？
如果这不是错误..有人能够解释吗？
我想象了“2”。属于
li 而 overflow-x: hidden 应用于子 p 。因此即使“2”。在 p 之外......它与 overflow-x: hidden 没有关系，因此应该不受影响 - 但事实并非如此......这是什么情况？ 最佳答案
你的理解是正确的；列表编号(在 CSS 中称为列表标记)应该存在于 p 之外，而不是内部。即使您指定 list-style-position: inside 也应该是这种情况，因为就像您说的那样，您将溢出应用于 p ，而不是 li 。
通常，每个列表项都会为其子项创建一个主块框，并为标记所在的另一个框创建一个框。子元素都应在主块框内呈现。从 CSS2.1 spec :
可以在 here 中找到对主要块框的更详细的解释。
在您的情况下，每个 li 创建一个主块框和一个标记框。 p.overflow-hidden 元素应该驻留在主块框中并且不影响标记。这是一个粗略的 ASCII 艺术图来展示我的意思:
列表
标记 li 主块盒
+-----+ +----------------------------+
| | |+---------------------------+|
| • | || Moo (p 方块方块) ||
| | |+---------------------------+|
+-----+ +----------------------------+
现在，规范对标记框本身的定位似乎含糊不清，但它确实说当 list-style-position 是 outside 时标记框与主块框是分开的。这似乎也意味着浏览器可以将标记框放置在主块框中，只要标记内容实际驻留在该标记框中(顺便说一句，目前还不能用 CSS 定位)。
但是Safari和Chrome似乎在做些完全不同的事情:它们似乎不仅将标记框放在主体框中，而且还放置在主体块框的第一个子元素中。这就是为什么当它位于 p 块框之外时被切断的原因:因为渲染引擎将其视为 p 内容的一部分，看到它超出了其水平边界，并将其切断。 (我怀疑它也被overflow-y: hidden剪辑，因为它位于左边缘之外，这通常不应该在LTR模式下发生，但这只是一个疯狂的猜测。)
当您将 list-style-position: inside 添加到 li 时，其他浏览器会正确地将 p 块框移动到标记 but Safari and Chrome simply move the marker into the p box 下方。尽管 CSS2.1 说它没有定义列表标记相对于列表项的主块框的确切位置，但它确实是关于 list-style-position: inside 的:
这显然不是 Safari 和 Chrome 对标记框所做的。
同样，规范(相当有意地)对此不是 100% 清楚，但我当然不希望列表标记成为 li 的任何子元素的子元素或受其影响Safari 和 Chrome。我很确定这是不正确的行为，即错误。
关于css - 带有嵌套 `overflow-x: hidden` 的列表隐藏列表计数器/点 - 为什么/这是一个错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21769248/