IE6下margin left雙倍bug問題

2022-07-30 14:18:15 字數 1526 閱讀 3217

熟悉 css 盒模型朋友相信對於 ie 雙倍浮動邊界 bug 不會陌生,這個 bug 只會產生在浮動行的第乙個浮動元素(此處說法不準確,並不是第乙個浮動元素,假如浮動的元素在一行顯示不下,占用了多行,那麼每一行的第乙個元素都會受此 bug 影響。啊呀教育網編註),所以如果第乙個浮動元素沒有使用外補丁 margin 就不會有雙倍距離。不過最近發現 ie 對於這個 bug 居然有延伸的現象。

問題下例所有圖的浮動行的第乙個浮動元素外補丁 margin 都為 0

#left2 的 margin-left 為 50px 顯示正常

當 #left2 的 margin-left 為 100px 顯示正常

接著我們將 #left2 的 margin-left 增大到 150px,開始有點奇怪了吧

我們把 #left1 的 width 改為 110px,而 #left2 的 margin-left 繼續保持 150px

看到上面的現象,我們發現 ie 還真有性格啊,到底這個性格男是怎麼樣算的啊?其實仔細觀察不難發現,當 #left2 的 margin-left 小於等於 #left 的寬度時顯示正常,可是一旦大於後就出現問題,它實際 #left2 的左邊界距離等於 #left1.width+(#left2.margin-left - #left1.width)*2

解決要解決這個 bug 其實很簡單,跟雙倍距離解決的方法一樣,將 #left2 設定 就 ok。

總結關鍵是剛才我為什麼說它是 bug 的延伸呢,因為無論是雙倍 bug 還是這個錯誤演算法的 bug 都只會出現一次。也許你還沒明白,那這樣說:

1. 如果 #left1 的 margin-left 大於 0 的話,那麼 #left1 左邊界就產生了雙倍距離的 bug,而後面的 #left2 的 margin-left 即便大於 #left1 的寬度也不會出錯了;

2. 如果 left1 的 margin-left 等於 0,#left2 的 margin-left 大與 #left1 的寬度,那麼 #left2 左邊界出現錯誤演算法的 bug,之後還有個 #left3,即便是 #left3 的 margin-left 大與 #left2 的寬度也不會出錯;

3. 如果 left1 和 left2 的 margin-left 都等於 0,之後還有個 #left3,而 #left3 的 margin-left 大於(#left1 和 #left2 的寬度之和),那麼 #left3 左邊界就出現錯誤演算法 bug,它的實際左邊界為 (#left1.width+left2.width)+(#left3.margin-left-#left1.width-left2.width)*2,然後 #left3 後面的所有浮動元素都不會出錯;

上面都是以左邊為例,右邊情況一樣。

IE6下margin left雙倍bug問題

熟悉 css 盒模型朋友相信對於 ie 雙倍浮動邊界 bug 不會陌生,這個 bug 只會產生在浮動行的第乙個浮動元素 此處說法不準確,並不是第乙個浮動元素,假如浮動的元素在一行顯示不下,占用了多行,那麼每一行的第乙個元素都會受此 bug 影響。千一網路編輯注 所以如果第乙個浮動元素沒有使用外補丁 ...

IE6下的效果

1.ie6有寬度border實現透明 如果想使得邊框顏色透明,在其餘瀏覽器下比較簡單,直接使用 border color transparent 但在ie6下這個辦法不行,可以通過下面的方式實現 border color tomato filter chroma color tomato 或者 bo...

IE6雙滾動條處理

如果想要解決這個問題,你需要選擇乙個最適合自己的解決方案.方案 1 在css定義中貼上下面的 html 這會強制預設出現垂直滾動條,這樣一來,從某些理由上來講,便消去了ie對水平滾動條的需求.優點 完全解決了這個問題,允許你保持完整的xhtml doctype.缺點 即使不需要垂直滾動條的時候也強制...