CSS hack for IE6/IE7/IE8/Firefox/Chrome/Safari

時間 2019-11-06

標籤 css hack ie6 ie7 ie8 firefox chrome safari 欄目 CSS 简体版

原文原文鏈接

每次調css最使人頭痛的就是瀏覽器校訂問題，由於每一個瀏覽器對css的解釋都不太同樣，firefox自己算是比較照規矩來，處理上比較簡單，可是遇到微軟的ie系列頭就大了，雖然都是ie，可是ie六、ie七、ie8各版本對css的解釋又不同，就算你自己已經在ie6調整好，可是在ie7看起來又是不同，這時咱們就得來對各個瀏覽器設定不一樣的數值來解決版面移位的問題。

網路上有很是多關於css hack的教學文章，固然處理方法也有不少種，接下來要跟你們說明的是屬於比較簡單的方法，可是如下的校訂確沒法經過w3c檢測，雖然沒法經過檢測，可是針對各個瀏覽器校訂確是有效的！

目前瀏覽器大宗仍是屬於ie6的天下，這緣由主要是由於xp自己內建ie6，並且不少使用者很喜歡重灌xp，所以ie6仍佔走了大半的瀏覽器天下，不過隨着windows7的出現，卻是有很是大的機會解決過氣的ie6，由於windows7自己是內建ie8，微軟的ie8對css的解釋已經愈來愈標準，固然標準程度還是不及firefox。

另外，若是要處理ie各版本瀏覽器的相容性問題，那必定要有各版本的ie瀏覽器能夠瀏覽，可是微軟做業系統內並無讓多版本的ie共存，爲了讓本身電腦內存在多種版本的ie瀏覽器，那就趕快下載ietester來使用吧！另外，也別忘記下載firefox來修正網頁css. css

區別ie和firefox

【辨識符號】：「\9」

【範例練習】：
#tip {

background:blue; /*firefox 背景變藍色*/

background:red \9; /*ie六、ie七、ie8背景變紅色*/

}

【說明】：由於ie瀏覽器看得懂「\9」，可是非ie的瀏覽器一概看不懂，所以就能夠用這個語法來區分ie和firefox(非ie瀏覽器，像是opera、google chrome 、safari等)，所以以上css範例中，非ie瀏覽器是顯示藍色背景，ie系列瀏覽器是顯示紅色背景。

——————————–我是分隔線——————————–
區別ie六、ie七、ie八、firefox

【辨識符號】：「\9」、「*」、「_」

【範例練習】：

#tip {

background:blue; /*firefox 背景變藍色*/

background:red \9; /*ie8 背景變紅色*/

*background:black; /*ie7 背景變黑色*/

_background:orange; /*ie6 背景變橘色*/

}

【說明】：由於ie系列瀏覽器可讀「\9」，而ie6和ie7可讀「*」(米字號)，另外ie6可辨識「_」(底線)，所以能夠依照順序寫下來，就會讓瀏覽器正確的讀取到本身看得懂得css語法，因此就能夠有效區分ie各版本和非ie瀏覽器(像是firefox、opera、google chrome、safari等)。

——————————–我是分隔線——————————–
區別ie六、ie七、firefox (方法 1)

【辨識符號】：「*」、「_」

【範例練習】：

#tip {

background:blue; /*firefox背景變藍色*/

*background:black; /*ie7 背景變黑色*/

_background:orange; /*ie6 背景變橘色*/

}

【說明】：ie7和ie6可讀「*」(米字號)，ie6又能夠讀「_」(底線)，可是ie7卻沒法讀取「_」，至於firefox(非ie瀏覽器)則徹底沒法辨識「*」和「_」，所以就能夠透過這樣的差別性來區分ie六、ie七、firefox，

——————————–我是分隔線——————————–
區別ie六、ie七、firefox (方法 2)

【辨識符號】：「*」、「!important」

【範例練習】：

#tip {

background:blue; /*firefox 背景變藍色*/

*background:green !important; /*ie7 背景變綠色*/

*background:orange; /*ie6 背景變橘色*/

}

【說明】：ie7能夠辨識「*」和「!important」，可是ie6只能夠辨識「*」，卻沒法辨識「!important」，至於firefox能夠讀取「!important」但不能辨識「*」所以能夠透過這樣的差別來有效區隔ie六、ie七、firefox。
區別ie七、firefox

【辨識符號】：「*」、「!important」

【範例練習】：

#tip {

background:blue; /*firefox 背景變藍色*/

*background:green !important; /*ie7 背景變綠色*/

}

【說明】：由於firefox能夠辨識「!important」但卻沒法辨識「*」，而ie7則能夠同時看懂「*」、「!important」，所以能夠兩個辨識符號來區隔ie7和firefox。

——————————–我是分隔線——————————–
區別ie六、ie7 (方法 1)

【辨識符號】：「*」、「_」

【範例練習】：

#tip {
*background:black; /*ie7 背景變黑色*/

_background:orange; /*ie6 背景變橘色*/

}

【說明】：ie7和ie6均可以辨識「*」(米字號)，但ie6能夠辨識「_」(底線)，ie7卻沒法辨識，透過ie7沒法讀取「_」的特性就能輕鬆區隔ie6 和ie7之間的差別。
區別ie六、ie7 (方法 2)

【辨識符號】：「!important」

【範例練習】：

#tip {

background:black !important; /*ie7 背景變黑色*/

background:orange; /*ie6 背景變橘色*/

}

【說明】：由於ie7可讀取「!important;」但ie6卻不行，而css的讀取步驟是從上到下，所以ie6讀取時因沒法辨識「!important」而直接跳到下一行讀取css，因此背景色會呈現橘色。

——————————–我是分隔線——————————–
區別ie六、firefox

【辨識符號】：「_」

【範例練習】：

#tip {

background:black; /*firefox 背景變黑色*/

_background:orange; /*ie6 背景變橘色*/

}

【說明】：由於ie6能夠辨識「_」(底線)，可是firefox卻不行，所以能夠透過這樣的差別來區隔firefox和ie6，有效達成css hack。

——————————–我是分隔線——————————–

關於ie六、ie七、ie八、firefox之間的css hack大概是以上那樣，若是有疏漏或是有錯誤還煩請你們指證一下囉！這些css hack是我目前看過比較簡單的處理方式，固然若是你不會很在乎css是否經過w3c的驗證，你只會在乎每一個用戶在不一樣的瀏覽器下閱讀是否能夠正常的話，其實以上css hack 對你來講是很是好用的，由於這些css hack若是善加利用確實能夠正確的解決瀏覽器相容性問題。

以上的css hack參照瞭如下幾篇文章所整理出來的，感謝如下文章的詳細說明。 html

瀏覽器兼容問題一直是前段開發工程師比較頭痛的問題，熟悉了裏面的規則也就變得簡單了，這裏有一份資料能夠分享給你們，你們平時開發過程當中遵循這個規律的話，會變得輕鬆多了： chrome

各瀏覽器CSS hack兼容表： windows

	IE6	IE7	IE8	Firefox	Chrome	Safari
!important		Y		Y
_	Y
*	Y	Y
*+		Y
\9	Y	Y	Y
\0			Y
nth-of-type(1)					Y	Y

代碼示例： 瀏覽器

#test{
color:red; /* 全部瀏覽器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE六、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE六、IE七、IE8支持 */
color:red\0; /* IE8支持 */
} 測試