針對IE6的一些CSS Hack編寫時的注意點小結

2022-09-25 23:15:09 字數 1797 閱讀 8949

區分出ie6的hack寫法

1.區別ie6、7與ff/ie8:

j**ascript code複製內容到剪貼簿

引用顯示效果:

ie 6/7:orange

ff/ie8:blue

原理:ff/ie8不支援*開頭,而ie6/7都支援。

2.區別ie6與ie7/ie8/ff:

css code複製內容到剪貼簿

引用顯示效果:

ie7/8/ff:green

ie6:blue

原理:ie6支援下劃線"_",ie7、8和firefox均不支援下劃線。

3.區別ff/ie8和ie6/7:

css code複製內容到剪貼簿

或者css code複製內容到剪貼簿

引用顯示效果:

ie6:程式設計客棧blue

ie7:green

ff/ie8:o程式設計客棧range

原理:ie6能識別-,ie7能識別+,ie8和ff都不能識別+和-

ie8/ff都不識別*,ie7優先識別!important,ie6不能識別!important。

4.可同時區分ie8、ie7、ie6、firefox的css hacks:

css code複製內容到剪貼簿

ie6相容的一些額外需要考慮的細節:

1.position:fixed

對這個屬性印象深刻,每一次需要用到固定的時候,程式設計客棧ie6總是蹦出來告訴你,我不支援position:fixed,你要對我特殊點,要麼使用css表示式,要是時刻計算滾動的高度,再加上position:absolute.

2.浮動雙倍邊距

當在浮動中使用margin時,你要時刻記得加上display:inline,不然ie6不給你好臉色,總是會讓你布局錯亂,就因為它會是雙倍的邊距。

3.背景透明

之前總是用png8來相容ie6,實在沒辦法時,你還要ps上下功夫,圖省事的話,你要加乙個dd_belatedpng.js,各種技能層出不窮,但是都有乙個就是耗時不討好。

4.max-height/min-height

想要給它乙個最大尺寸或者最小尺寸時,ie6卻告訴你,我只能用確定尺寸,你需要的話,用表示式吧

5.ie6 點選鏈結出現虛線

呵呵,產品說不去掉影響使用者體驗,我只想說:用了ie6還談啥體驗。

6.彈窗出現在select上要加個iframe

因為select在ie6中是乙個控制項,層級比其他層高,所以如果彈窗要相容ie6,背景記得加多一層iframe

7.尺寸超出會自動延伸

假如你給某個層加了乙個高度,當內容超出時,沒有overflow:hidden;時,ie6缺省會撐開,有時候會出現莫名布局錯亂。

8.不能使用.class.class2

使用以上的css寫法在ie6中不識別,這導致了,很多時候你不得不改變重構的策略,改用.class-class1的寫法。

9.盒子模型解析不一致

在quirks mode中,盒子的寬度計算與standards mode的不同

在 ie 盒模型中,

box width = content width + padding left + padding right + border left + border right,

box height = content height + padding top + padding bottom + border top + border bottom,

而在 w3c 標準的盒模型中,box 的大小就是 content 的大小。

本文標題: 針對ie6的一些css hack編寫時的注意點小結

本文位址:

針對ie6的一些小總結

1.可能是樣式沒有被最新樣式所覆蓋所以要提高當前樣式的優先順序在後面加上 important屬性 2.當背景不顯示或者層的位置錯位試著加上 width 或者overflow hidden 3.ie6下,如果設定了寬度,其內容並沒有超出寬度時卻自動換行時,我們可以把寬度改為0 width 0px 4....

IE6的一些相容問題

1 css相容問題 1 ie6不識別html5標籤 解決 引入html5shiv.js庫 2 ie6元素左右浮動,子元素設定高度後,父元素的浮動消失 解決 給子元素也加上浮動 3 ie6下第一塊元素浮動後,第二塊元素加的margin left值等於第一塊元素的寬度,會有間隙問題 解決 第二塊元素去掉...

IE6的一些相容性問題

總結一下ie6相容性的部分小問題 1.ie6的hack問題 在css屬性前加上下劃線 這個屬性就是ie6認識的專有屬性。可以用它解決一些ie6的相容問題。例如 background color red 只有ie6才認識這個屬性2.ie6不支援小於12px的盒子。解決辦法是給盒子設定乙個 font s...