CSS overflow:hidden 隐藏列表的项目符号？

Question

我刚刚注意到一些有趣的事情。假设我有一个 HTML 列表：

 <ol>
    <li>Lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</li>
</ol>

还有这个 CSS：

 li {
    white-space: nowrap;
    overflow: hidden;
}

正如预期的那样，最后一项中的长文本确实在超出容器宽度时被砍掉了。但！列表项编号也受 overflow 属性的影响，因此未显示。

但是，像这样修改 CSS：

 ol {
    overflow: hidden;
}
li {
    white-space: nowrap;
}

按预期工作（文本不会超出容器，但会显示列表项）。至少这一切对于 Firefox 4 beta10 来说是正确的。

您不认为受 overflow 影响的编号有点不合逻辑吗？为什么会这样？这是故意的行为吗？它是在规范中还是只是有人忘记处理的一些奇怪的事情？

原文由 mingos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

This is the default behavior as far as I´m aware, if the list-style-position is outside , bullets of an ul and numbers of an ol 不显示。至少在 Firefox 中，我记得以前在旧版本中看到过它。

原文由 jeroen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

浏览器向列表添加默认边距和填充。首先尝试使用 reset.css 删除默认样式，这样您就可以干净利落地开始，而不会出现意外行为。搜索 Eric Meyer 的重置。希望能帮助到你。

原文由 Jim Amos 发布，翻译遵循 CC BY-SA 2.5 许可协议