主頁 > 知識庫 > IE浮動邊界BUG延伸探討

IE浮動邊界BUG延伸探討

熱門標簽:服務器配置 鐵路電話系統 網站文章發布 智能手機 美圖手機 檢查注冊表項 銀行業務 呼叫中心市場需求

熟悉CSS盒模型朋友相信對于IE雙倍浮動邊界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設置{display:inline}就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后面的所有浮動元素都不會出錯;

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

標簽:上海 新疆 沈陽 長治 滄州 河南 紅河 樂山

巨人網絡通訊聲明:本文標題《IE浮動邊界BUG延伸探討》,本文關鍵詞  ;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    久久综合香蕉久久久久久久_国产av无码专区亚洲av麻豆_人妻少妇偷人精品视频_老湿机香蕉久久久久久