overflow:hidden on div in ordered list 影响 li，Chrome bug？

Question

我倾向于认为这是 Chrome 中的错误（为什么子元素上的样式会影响父元素？），但可能还有其他我不理解的事情.

下面的排序列表有1个项目，在Firefox和IE10中是有编号的（虽然在IE中，它的位置是错误的）。不过在 Chrome 中，数字完全隐藏了。

ol {
  list-style-position: outside;
}
div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
}

<ol>
  <li>
    <div>Some text that trails off</div>
  </li>
</ol>

怎么回事on/is这是bug/can可以解决的吗？

Answer 1

可以说这不是错误，更多的是不同浏览器引擎呈现 CSS 的方式不同。（Blink vs Trident vs Gecko vs WebKit 等）

从技术上讲，Chrome 显示是正确的，因为按照 overflow: hidden; 的规定隐藏了 div 之外的所有内容。

如果您使用 Chrome 检查器，您可以看到元素的边缘在哪里以及该区域之外的数字。

你最好的解决方法是设置一个额外的 CSS 来覆盖主要的 div 元素。

ol {
  list-style-position: outside;
}
div {
  overflow: hidden;
}
ol div {
  overflow: visible;
}

<!doctype html>
<html>

<body>

  <ol>
    <li>
      <div>Some text</div>
    </li>
  </ol>

</body>

</html>

Answer 2

如果需要在li里面使用div，将div显示为inline，否则list-style: inside会起作用。

ol {
  list-style-position: outside;
}

div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px; display: inline;
}

<ol>
    <li><div>Some text</div></li>
</ol>

Answer 3

好吧，这是一种技巧，但它确实有效。添加伪 :before 元素会恢复列表样式，因为 li 现在会有一些内容。将 div 带回顶部，看起来什么都没有改变。

CSS

ol > li:before {
    content: '';
    display: block;
    height: 1px;
}

div {
    margin-top: -1px;
}

演示

Try before buy

Answer 4

为这些元素定义选择器。

如果您只使用全局标签，您将开始运行遇到问题：<li> <div> 特别是因为您在这里嵌套。

例如：<li class="dothis"> <div class="thisdivdoes"> ...

执行此操作后，将更容易区分 overflow:hidden; 哪里和不哪里。

由于您的标签在您的 <li> 中，请定义您希望他们单独执行的操作，因为这就是您想要执行的操作，否则您可能会看到它们在您的体验中相互继承。

此外，请检查 HTML5 中的文档类型，我认为它无效，但严格来说它可能有效。

overflow:hidden on div in ordered list 影响 li，Chrome bug？

overflow:hidden on div in ordered list affects li, Chrome bug?

html

css

firefox

google-chrome