嗯,这是最容易的从网页复制粘贴在那里的详细解释:
HTML代码:
<!--********** Start of demo ***********-->
<div id="floatholder">
<div id="float">
<br />
<span> Float
<br /><br />
<a href="#"> test link </a>
</span>
</div>
This is bare text. <a href="#">Test link</a>
<div style="border: 3px solid #f00; background: #dde;">This is text inside a div.
<a href="#">Test link</a></div>
This is bare text. <a href="#">Test link</a>
<div style="border: 3px solid #0c0; background: #dde;">This is text inside a div.
<a href="#">Test link</a></div>
This is bare text. <a href="#">Test link</a>
<div style="border: 3px solid #00f; background: #dde;">This is text inside a div.
<a href="#">Test link</a></div>
This is bare text. <a href="#">Test link</a>
<div id="clear">Clearing div</div> <!--******* Note: a cleared <br> will not prevent bug *******-->
<div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div
does not touch float, bug is not triggered. <a href="#">Test link</a></div>
</div>
<!--********** End of demo ***********-->
这里是screenshoot from IE6
修正:
的修复:
最后,即使div#浮动前导 div#floatholder,但前提是此外部浮动实际触及 清除div#floatholder!中的div,将触发此错误 !
我们知道有三种方法可以防止这个错误, 。
- 保持清除div不接触浮动,或避免在div#floatholder上使用 背景。不是 完全理想。
- 同时给div#floatholder和div#float'position:relative'。是 一定要充分测试这种方法。
- 给DIV#的FloatHolder hasLayout(目前首选方法)
我们建议使用条件注释 养活一个hasLayout的修复程序IE6和 下面只。有关 有用的更多详细信息,请参阅Zoom Fix page。
感谢Simon Willison为 及时截图。
这个bug被称为捉迷藏,这里是一切的详细解释: http://www.positioniseverything.net/explorer/peekaboo.html
虽然,我不得不承认,这对我来说工作时,我将所有这些3个步骤。后两个它没有工作,但我添加显示后:内联浮动div它的工作。
我非常抱歉,因为我是一名mac用户,所以我很难分辨究竟是什么原因导致问题,但还有IE开发工具栏,它可以帮助您使用CSS类来查看隐藏文本的内容。这绝不是没有理由:(每个浏览器都有它自己的理由(这是令人伤心的),但总有一个)谢谢! – 0100110010101 2009-10-10 19:45:08
嘿opetrov,感谢评论。同时我找到解决方案! – 2009-10-11 12:09:39
发布您找到答案的解决方案,而不是在您的问题中提出。 – 2009-10-13 22:17:36