为什么溢出-y：隐藏的HTML列表使子弹/数字不可见？

Question

我将<li>的CSS属性overflow-y设置为hidden，然后删除了其子弹/号码。为什么？他们的关系是什么？ （我该如何纠正？）

以下是一个简单的示例（关于@Paulie_D answer，我添加了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上运行它。

修改 由于一些答案，我解释说：

项目符号/数字在 x-bounds 之外，没有 y-bounds ！

Answer 1

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

  

我知道;但它们在x边界之外，没有y边界！

检查此图片：

蓝色框是列表元素的边界框。列表元素之前的空格是父ul和ol元素的默认填充。因此子弹是列表元素的外。

Answer 2

从我的阅读中，当您设置overflow-y:hidden时，overflow-x 计算值设置为auto，这是CSS Spec的一部分。< / p>

  

计算值：如指定的那样，但如果overflow-x或overflow-y之一不可见，则可见计算为auto。

...和overflow:auto

  

此值表示框的内容被剪切到填充框。

..因为标记位于li之外，所以它被剪裁并隐藏起来。

Answer 3

导致无序列表中的项目符号或有序列表中的数字不仅仅是边界框