IE8 BUG WITH MAX-WIDTH AND OVERFLOW

最新推荐文章于 2021-08-04 00:28:33 发布

转载最新推荐文章于 2021-08-04 00:28:33 发布 · 857 阅读

css 专栏收录该内容

89 篇文章

订阅专栏

本文记录了一个在 Internet Explorer 8 中出现的有趣 BUG，该 BUG 导致设置了 nowrap 和 overflow 属性的元素所在的浮动容器无法正确折叠。文章提供了一个解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Just a quick documentation of this interesting bug. This only happens in Internet Explorer 8 (but not 7 or 9), which was interesting. If you have an element with long text but it has white-space:nowrap to prevent text wrapping with a max-width and overflow:hidden to clip the overflowed text, then a floated container (which should collapse to the width of the content) will collapse to the width of the text as if it was not set to be clipped. The use of text-overflow:ellipsis has no effect on this.

Here is the text case:

<style>
        #a { float:left; border:1px solid blue; }
        #b { overflow:hidden; max-width:50px; border:1px solid green; white-space:nowrap; }
    </style>
<div id="a">
        <div id="b">here's a really long string</div>
    </div>As the screenshot from IE8 shows, the floated container doesn't collapse like it should.
Solution?
In this particular case, I was able to add a max-width to the container so that it only expanded as far as the content contained within would expand.
转自：http://snook.ca/archives/html_and_css/ie8-bug-max-width-overflow