ie6雙邊距bug及其解決辦法

2022-05-10 20:58:23 字數 1018 閱讀 7576

">

">

上面這段**,在ie6和ff中的顯示結果分別如下圖所示:

可以看到,在ie6中顯示的紅色區域的左邊距實際為40px,是css**中設定的20px的兩倍,這是ie6的雙邊距bug。當滿足下面這三個條件時,就會出現這個bug:

1、要為塊狀元素;

2、要左側浮動;

3、要有左外邊距(margin-left)

解決這個bug,只需在相應的塊狀元素的css屬性中加入「display:inline;」。

出現雙邊距的條件是當浮動元素的浮動方向和margin的方向一致時才會出現。也就是說,並不是只有塊狀元素左浮動,且具有左外邊距時才有這個bug,當乙個盒子右浮動的同時有乙個向右的margin-right的時候,ie6也會把margin-right解析為原來的2倍。當有多個同行元素都浮動了,而且都有同方向的margin,則只有最靠近浮動方向的元素有雙邊距bug。

解決這個bug有兩個方法:

1.給float的元素新增乙個display:inline

2.給ie6寫乙個hack,其值是正常值的一半,即_margin-right:10px;這個方法不推薦,因為要加hack寫法,而這個是要盡量避免寫的。但是這個正好能夠說明這個bug的真實存在。

本來以為,將display設定為inline後,就改變了bug產生的條件之一,即必須是塊狀元素。但是後來又看到了下面這段話:「熟悉規則的人知道浮動元素自動設定為」block」元素,而不管他們之前是什麼。這說明浮動元素上的會被忽略,事實上所有的瀏覽器沒有呈現任何改變,包括ie。但是,它不知何故讓ie停止將浮動元素的邊界翻倍。」

IE6雙邊距bug及其解決辦法

無標題文件 title style type text css body,div div1 div2 style head body div id div1 div div id div2 div body html 上面這段 在ie6和ff中的顯示結果分別如下圖所示 可以看到,在ie6中顯示的紅色...

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

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

IE6 遇到bug及解決辦法

當頁面上的元素使用 float 浮動時,不管是向左還是向右浮動 只要該元素帶有 margin 畫素都會使該值乘以 2,例如 margin left 10px 在 ie6 中,該值就會被解析為 20px。想要解決這個 bug 就需要在該元素中加入 display inline 或 display bl...