Internet Explorer overflow bug

最新推荐文章于 2024-05-03 19:53:42 发布

最新推荐文章于 2024-05-03 19:53:42 发布 · 182 阅读

文章标签：

#CSS #Access #HTML

html+css 专栏收录该内容

1 篇文章

订阅专栏

Internet Explorer 6 和 7 在处理相对定位元素时存在一个错误，即这些元素会被错误地叠加到页面上的所有其他元素之上，呈现出一种“固定”的外观。此问题尤其发生在带有 'overflow:auto' 的容器中。解决此问题的简单方法是在包含块上应用 'position:relative'。

Internet Explorer - Bug Report

This bug relates to the handling of relatively positioned elements inside an overflow box.
Applies to:

* CSS
* (X)HTML
* IE6 and IE7

W3 states:

9.4.3 Relative positioning

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap. However, if relative positioning causes an 'overflow:auto' box to have overflow, the UA must allow the user to access this content, which, through the creation of scrollbars, may affect layout.

Internet Explorer incorrectly overlays the relatively positioned element over all other elements on the page, giving it a "fixed" appearance when scrolling inside an overflow box.
The workaround

What's a bug report without a solution?

The simplest fix is to apply position: relative to the containing block; the one with overflow: auto.

http://www.rowanw.com/bugs/overflow_relative.htm