溢出:隐藏在有序列表中的div影响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>

发生了什么/这是一个错误/可以解决这个问题吗？

Answer 1

嗯，这是一种黑客攻击，但它确实有效。添加伪:before元素会恢复列表样式，因为li现在将包含一些内容。返回div到顶部，看起来什么都没有改变。

CSS

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

div {
    margin-top: -1px;
}

演示