IE6躲躲猫bug -IE6 Peekaboo Bug
来源:互联网 发布:java开发微信公众号 编辑:程序博客网 时间:2024/06/05 10:03
IE6 Peekaboo Bug
The setup:
A liquid box has a float inside, and content that appears along side that float. All is well, until it's viewed in IE6. "Wah? Where's my content?!" You reload the page, and nothing. When you scroll down, or perhaps switch to another window, upon returning to the 'scene of the crime' there it all is, fat 'n sassy!
Note: This long standing bug has been suppressed in IE7 (released in late 2006), so the Peekaboo Bug is finally on the way out. IE6 will still exist however, and as long as it does we'll need to fix it.
The demo:
div#floatholder (dotted border) is dimensioned horizontally by margins, and vertically by content. div#float (thick brown border) is floated left, and contains a test link. Following that are several lines of bare text, alternating with divs containing more text, plus test links. Next is a cleared div (purple border), then another div for good measure.
Float
test link
To reset bug, reload page. Screenshot
The bugs:
This effect may turn up in a number of different contexts. We would try to list them here, but the page would become very long, and make our heads hurt.
Fun with links:
Try clicking the links. This will reveal the missing content, same as scrolling. If the float is a linked image, same deal. But only links within div#floatholder, and before the clearing div will expose the missing content.
But check out the last link in the content area. Weird!
Special notes:
Multiple repetitions of the content div containing the triggers can behave very strangely. As argued on css-d, it appears to be triggered by the clearing div. When it is forced to clear a float, the previous content after the float gets covered somehow, perhaps by the background on div#floatholder. (dotted border)
The fixes:
Finally, this bug will be triggered even if div#float preceeds div#floatholder, provided that this external float actually touches the clearing div within div#floatholder!
There are three ways we know to prevent this bug.
- Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.
- Give both div#floatholder and div#float 'position: relative'. Be sure to fully test this method.
- Give div#floatholder hasLayout (now the preferred method)
We suggest using a conditional comment to feed a hasLayout fix to IE6 and below only. Further details helpful to this method may be found in the Zoom Fix page.
Thanks to Simon Willison for the timely screenshot.
Big John Design Contact Us ©positioniseverything.net
Last updated: September 9th, 2008
Created July 7, 2002
- IE6 Peekaboo(躲躲猫) Bug
- IE6躲躲猫bug -IE6 Peekaboo Bug
- ie6 bug
- ie6---bug
- IE6 Bug
- IE6 BUG
- IE6中的BUG
- IE6的一個小bug
- IE6 重复字符bug
- ie6 css bug
- IE6 bug总结
- IE6 BUG 集合
- IE6 3PX bug
- IE6的极品bug
- ie6 的bug
- IE6 fixed bug
- IE6一BUG
- ie6的height bug
- 删除(erase)
- 查找(find)
- find_first_of
- VC处理XML文档类的开发
- 面试模拟题4
- IE6躲躲猫bug -IE6 Peekaboo Bug
- 面试模拟题5
- 我国公布整治互联网低俗之风第二批曝光网站名单
- 安装某个程序所需的依赖包
- Solaris的minor device
- 工程索引(Engineering Index, Ei)数据库中被《Ei Compendex》收录与被《Ei Pageone》收录数据的区别和识辨
- IIS上安装PHP
- Primary Key和Unique Key;UNION和UNION ALL 区别
- 高效稳定的大型网站系统架构分析