IE6 遇到bug及解決辦法

2021-10-09 02:34:05 字數 1254 閱讀 6755

當頁面上的元素使用 float 浮動時,不管是向左還是向右浮動;只要該元素帶有 margin 畫素都會使該值乘以 2,例如「margin-left:10px」 在 ie6 中,該值就會被解析為 20px。想要解決這個 bug 就需要在該元素中加入 display:inline 或 display:block 明確其元素型別即可解決雙倍邊距的 bug

當元素使用 float 浮動後,元素與相鄰的元素之間會產生 3px 的間隙。詭異的是如果右側的容器沒設定高度時 3px 的間隙在相鄰容器的內部,當設定高度後又跑到容器的相反側了。要解決這類 bug 的話,需要使布局在同一行的元素都加上 float 浮動。

ie6 中奇數的高寬顯示大小與偶數高寬顯示大小存在一定的不同。其中要問題是出在奇數高寬上。要解決此類問題,只需要盡量將外部定位的 div 高寬寫成偶數即可。

ie6 中的下方會存在一定的間隙,尤其在垂直挨著的時候,即可看到這樣的間隙。要解決此類問題,需要將 img 標籤定義為 display:block 或定義 vertical-align 對應的屬性。也可以為 img 對應的樣式寫入 font-size:0

如果乙個元素中沒有任何內容,當在樣式中為這個元素設定了 0-19px 之間的高度時。此元素的高度始終為 19px。

解決的方法有四種:

1.在元素的 css 中加入:overflow:hidden

2.在元素中插入 html 注釋:

3.在元素中插入 html 的空白符:

4.在元素的 css 中加入:font-size:0

在某些比較複雜的排版中,有時候浮動元素的最後一些字元會出現在 clear 清除元素的下面。

1.確保元素都帶有 display:inline

2.在最後乙個元素上使用「margin-right:-3px

3.為浮動元素的最後乙個條目加上條件注釋,***

4.在容器的最後元素使用乙個空白的 div,為這個 div 指定不超過容器的寬度。

具體 bug 為,元素的父級元素設定的 z-index 為 1,那麼其子級元素再設定 z-index 時會失效,其層級會繼承父級元素的設定,造成某些層級調整上的 bug。

寫在最後:實際上 ie6 中,很多 bug 的解決方法都可以使用 display:inline、font-size:0、float 解決。因此我們在書寫**時要記住,一旦使用了 float 浮動,就為元素增加乙個 display:inline 樣式,可以有效的避免浮動造成的樣式錯亂問題。使用空 div 時,為了避免其高度影響布局美觀,也可以為其加上 font-size:0 這樣就很容易避免一些相容上的問題。

IE6之前盒裝模型Bug解決辦法!

先溫習一下對於ie的box model的破解 ie box model這個臭名昭著的bug存在於ie6 win以前的每乙隻版本,這個蟲子直到tantak發布了流傳最為廣泛的那個hack才開始被馴服 ie5.x win對box model的解析是一樣的,他們認為width包括了邊框 border 和補...

IE6文字溢位bug解決辦法

在第二個容器前存在注釋 這也是為什麼此bug也叫做 ie6注釋bug 的原因 歌劇院的魅影 為何會出現重複文字 bug雖然的的確確的存在,但是為什麼會出現這樣的bug依然沒有統一的定論。不同的高手也是各執一詞,誰也說服不了誰。真正的原因也許只有當時的ie6團隊才能道出來,但是現在仍然沒有官方的說法。...

IE6絕對定位的bug及其解決辦法

position absolute定位在ie6下存在left和bottom的定位錯誤問題 zzsky zzsky 上面這段 在ie6中定位錯誤。解決辦法有兩種 1 給父層設定zoom 1觸發layout zzsky 2 給父層設定寬度 width zzsky 下面的這段 在ie6下,bottom定位...