RSS
热门关键字:  CSS教程  CSS布局  CSS样式  CSS hack  CSS JS
当前位置 :| 主页>CSS hack>

IE6 Peekaboo(躲躲猫) Bug的解决办法

来源:cssplay 作者:cssplay 时间:2008-02-26 点击:

IE6 Peekaboo(躲躲猫) Bug的解决办法
Peekaboo本意就是“躲躲猫”游戏(捉迷藏),这个BUG也是这样,让你的页面内容时隐时现。
关于这个BUG的原文在这里:http://www.positioniseverything.net/explorer/peekaboo.html
里面使用了很多辅助元素来形象的说明和演示这个BUG,如果你英文不是很好或者其他原因,你可以看下面的讲解。
在一个div#box里面放置一个浮动的div#float(例如:里面的内容是2行文字)和一个没有任何 CSS样式的div#content(例如:里面的内容是1行文字),然后在它们的下面放置一个div#clear(例如:里面的内容是1行文字)。
演示html代码:
<style type="text/css">
      #box {background: #eee;}
       #float {float : left;}
       #clear {clear: both;}
</style>
<div id="box">
    <div id="float">左边漂浮的任意内容<br />这是为了比右边的内容高一点</div>
    <div id="content">任意输入的内容</div>
    <div id="clear">下面清除的标签</div>
</div>
<style type="text/css">
    #box {background: #eee;}
    #float {float : left;}
    #clear {clear: both;}
</style>
<div id="box">
    <div id="float">左边漂浮的任意内容<br />这是为了比右边的内容高一点</div>
    <div id="content">任意输入的内容</div>
    <div id="clear">下面清除的标签</div> 
</div>

这样的话在IE7及其它标准浏览器浏览是没有问题的,分别显示出这3块文字内容,但是在IE下浏览时就只显示出了div#float、div#clear里面的内容(演示),div#content就莫明奇妙的消失了,在哪里?你把鼠标放在应该显示的地方划一划,就出现了本该出现的内容。也就是在变化背景的时候它就会出现,你也可以在div#clear下面放置很长很长的内容,也就是使浏览器出现滚动条,你向下拖动滚动条再拖回来,它一样也出现了,这样就明白了它为什么叫Peekaboo!
修复Peekaboo Bug几种方法:
● 不要在div#box里面使用背景,或者保持div#clear和div#float在一起。
● 给div#box一个明确的“宽度”或“高度” 。
#box {
height: 100%; /* kill peekaboo bug in IE */
}
● 把div#box和div#float的定位类型都设置为“相对”。


最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册
热点实例