overflow：在有序列表中的div上影响li，Chrome错误？ [英] overflow:hidden on div in ordered list affects li, Chrome bug?

问题描述

我倾向于认为这是Chrome中的一个错误（为什么子元素上的样式会影响父元素？），但可能还有其他问题，我不明白。

I'm inclined to think this is a bug in Chrome (why would a style on a child element affect the parent?), but there might be something else going on that I'm not understanding.

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

The ordered list below has 1 item, which in Firefox and IE10 is numbered (although in IE, it's positioned wrong). In Chrome though, the number is hidden entirely.

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>

/这是一个bug /可以解决这个问题吗？

What's going on/is this a bug/can this be worked around?

推荐答案

好吧，这是一种黑客， 。在之前添加一个伪：before -element返回列表样式，因为 li 将 div 返回顶部，并且看起来没有更改。

Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.

CSS

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

div {
    margin-top: -1px;
}

演示

购买之前尝试

这篇关于overflow：在有序列表中的div上影响li，Chrome错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！