嗯,這是最容易的從網頁複製粘貼在那裏的詳細解釋:
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