为什么 overflow-y:hidden of HTML-lists 使 bullet/number 不可见？

Question

我将<li>的CSS属性overflow-y设置为hidden，然后它的bullet/number被删除了。为什么？他们是什么关系？（如何更正？）

这是一个简单的示例（关于，我添加了overflow-x:visible）：

li:first-child {
  overflow-y:hidden; 
  overflow-x:visible;
}

<ul>
    <li>Unordered list - Item 1</li>
    <li>Unordered list - Item 2</li>
</ul>
<ol>
    <li>Ordered list - Item 1</li>
    <li>Ordered list - Item 2</li>
</ol>

我运行它在 Firefox v49.x 和 Chrome v54.x.

编辑： 由于一些回答，我解释一下：

Bullets/Numbers 在 x-bounds 之外，没有 y-bounds!

Answer 1

默认情况下，项目符号 在列表元素 之外，因此 overflow-y:hidden; 隐藏了它们。您可以使用 list-style-position: inside; 覆盖默认的 outside 值。

I know that; but they are outside of x-boundaries, no y-boundaries!

检查这张图片：

蓝色框是列表元素的边界框。列表元素之前的 space 是父元素 ul 和 ol 的默认填充。所以项目符号在列表元素外部。

Answer 2

因为无序列表中的项目符号或有序列表中的数字比边界框更多

Answer 3

根据我的阅读，当您设置 overflow-y:hidden 时，overflow-x computed 值设置为 auto，这是 CSS Spec.

Computed value: as specified, except with visible computing to auto if one of overflow-x or overflow-y is not visible.

...和overflow:auto

This value indicates that the box’s content is clipped to the padding box.

..并且由于标记位于 li 之外，因此被剪裁并因此被隐藏。

为什么 overflow-y:hidden of HTML-lists 使 bullet/number 不可见？

Why overflow-y:hidden of HTML-lists makes bullet/number to be invisible?

html

css

hidden

bulletedlist

html-lists