IE捉迷藏bug詳解(躲貓貓)_Div+CSS教程

2024-07-11 08:41:00

字體：大中小

供稿：網(wǎng)友

　　IE捉迷藏bug（peek-a-boo），之所以起這個名稱是因為在某些條件下文本看起來消失了，只有在重新裝載頁面時才再度出現(xiàn)。出現(xiàn)這個bug的條件是：一個浮動元素后而跟著一些非浮動元素，然后是一個清理元素，所有這些元素都包含在一個設(shè)置了背景顏色或圖像的你元素中。假如清理元素砬到了浮動元素，那么中間的非浮支元素看起來消失了，隱到了父元素的背景顏色或圖像后面，只有在刷新頁面時才重新出現(xiàn)。

　　幸運的是，有許多方法可以解決這個bug。最輕易的方法可能是去掉父元素上的背景顏色或圖像。但是，這經(jīng)常是不可行的。另一個方法是避免清理元素與浮動元素接觸。假如窗口元素應(yīng)用了特定的尺寸，那么這個bug似乎就不會出殃了。假如給窗口指定行高，這個bug也不會出現(xiàn)。最后，將浮動元素和容器元素的position屬性設(shè)置為relative也會減輕這個問題。

解決方案

　　在使用一些小技巧來解決這個bug之前，應(yīng)當(dāng)聽聽來自positioniseverything.net的網(wǎng)站專家的建議，positioniseverything.net是網(wǎng)上最早開始研究CSS在瀏覽器下兼容性的組織之一，而捉迷藏bug也是由positioniseverything首先整理出來的，對于此問題，應(yīng)當(dāng)從兩方面入手：一是使用技巧去解決bug，二是通過一些編碼習(xí)慣，預(yù)防捉迷藏情況的發(fā)生。positioniseverything提供了4個途徑供大家來預(yù)防和解決捉迷藏問題：

　　1.在對頁面上的對象使用float浮動之后，最后在下面使用帶有clear:both的div對頁面進行一些浮動上的清理工作，并且盡量避免對#layout使用background。

　　2.假如有可能，可以給#layout使用固定和高度，盡管這樣會對頁面有所限制，但能消除一些捉迷藏的影響。

　　3.可以嘗試給#layout和#left使用position:relative。

　　4.對#layout使用line-height屬性，強制瀏覽器對其中的內(nèi)容進行選中調(diào)整，從面可以消除捉迷藏bug，例如使用line-height:1.2；就能夠使頁面運作變得正常。

　　bug雖然是IE留下的后遺癥，但是別一方面我們應(yīng)當(dāng)在div的嵌套上遵循一些習(xí)慣，晝使用最少的層次嵌套來滿足頁面設(shè)計需要，使頁面結(jié)構(gòu)簡單，輕易控制與治理，盡可能的減小由于不必要的嵌套引來的邊鎖問題。

上一篇：IE中奇怪的左右border斷線現(xiàn)象_Div+CSS教程

下一篇：CSSHack技術(shù)速查對照_CSS教程