【IE6】IE6bug之躲猫猫bug(peek-a-boo)bug
2012-12-04 22:15 sniper007 阅读(463) 评论(0) 编辑 收藏 举报IE6的躲猫猫bug(peek-a-boo)bug,之所以起这个名称是因为在某些条件下文本看起来消失了,只有在重新装载页面时才再度出现。
出现这个bug的条件是:一个浮动元素后而跟着一些非浮动元素,然后是一个清理元素,所有这些元素都包含在一个设置了背景颜色或图像的你元素中。如果清理元素扩展了浮动元素,那么中间的非浮动元素看起来消失了,隐到了父元素的背景颜色或图像后面,只有在刷新页面时才重新出现。
IE6的躲猫猫 示意图如下:
幸运的是,有许多方法可以解决这个bug。
最容易的方法可能是去掉父元素上的背景颜色或图像。
但是,这常常是不可行的。另一个方法是避免清理元素与浮动元素接触。如果窗口元素应用了特定的尺寸,那么这个bug似乎就不会出殃了。如果给窗口指定行高,这个bug也不会出现。最后,将浮动元素和容器元素的
position属性设置为relative也会减轻这个问题
如何找到猫猫?
其实方法还蛮多的,如果仔细看网页源代码中关于CSS部分的注释,其实就已经可以找到一些答案。这里列出一些方案,供大家参考。
只要采用下面方法的任意一种即可消灭bug
1.指定最外面div容器(#holder)和浮动元素的'position: relative'
2.去掉最外面div容器(#holder)的背景颜色(或者背景图片)
3.给予最外面div容器(#holder)的 hasLayout
3-1.明确的指定最外面div容器(#holder)的宽度(相对宽度和绝对宽带都可以)。
3-2.缩小浮动div容器(#floater)的高度到一定程度
3.不浮动div容器(#floater)
4.不使用<div class="clear"><div>技术
上面的方法只是理论上的,请根据实际需要采用不同的方法。另:这个bug在FireFox、safari、opera等浏览器下不会出现。因此本篇就没有截图。
3.给予最外面div容器(#holder)的 hasLayout
3-1.明确的指定最外面div容器(#holder)的宽度(相对宽度和绝对宽带都可以)。
3-2.缩小浮动div容器(#floater)的高度到一定程度
3.不浮动div容器(#floater)
4.不使用<div class="clear"><div>技术
上面的方法只是理论上的,请根据实际需要采用不同的方法。另:这个bug在FireFox、safari、opera等浏览器下不会出现。因此本篇就没有截图。
测试代码:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 .wrap{/*background:#0046a3*/;position:relative;} 8 .photo{float:left;/*width:50px;height:50px;*/;color:red;} 9 .clear{clear:both;} 10 </style> 11 </head> 12 13 <body> 14 <div class="wrap"> 15 <div class="photo">this is a pic</div> 16 <div class="content">woshiaaaaaaaaaa</div> 17 <div class="clear"></div> 18 </div> 19 </body> 20 </html>
但是,这个BUG以前切图的时候出现过,刚刚用ietester测试,IE6下没有重现
参考文档:《精通CSS高级web标准解决方案》第二版 9.5.4