首頁 >web前端 >css教學 >最全的CSS hack方式一覽(相容多瀏覽器)

最全的CSS hack方式一覽(相容多瀏覽器)

高洛峰
高洛峰原創
2017-03-02 15:22:561346瀏覽

為了得到統一的頁面效果,就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式,我們把這個針對不同的瀏覽器/不同版本寫對應的CSS code的過程,叫做CSS hack! 做前端多年,雖然不是常常需要hack,但是我們常常會遇到各瀏覽器表現不一致的情況。基於此,某些情況我們會極不情願的使用這個不太友善的方式來達到大家要求的頁面表現。我個人是不太推薦使用hack的,要知道一名好的前端,要盡可能不使用hack的情況下實現需求,做到較好的用戶體驗。可是啊,現實太殘酷,瀏覽器廠商之間歷史遺留的問題讓我們在目標需求下不得不向hack妥協,雖然這只是個別情況。今天,結合自己的經驗和理解,做了幾個demo把IE6~IE10和其他標準瀏覽器的CSS hack做一個總結,也許本文應該是目前最全面的hack總結了吧。

什麼是CSS hack
由於不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對CSS的支援、解析不一樣,導致在不同瀏覽器的環境中呈現不一致的頁面展現效果。這時,我們為了獲得統一的頁面效果,就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式,我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程,叫做CSS hack!

CSS hack的原理
由於不同的瀏覽器和瀏覽器各版本對CSS的支援及解析結果不一樣,以及CSS優先權對瀏覽器展現效果的影響,我們可以據此針對不同的瀏覽器情境來套用不同的CSS。

CSS hack分類
CSS Hack大致有3種表現形式,CSS屬性前綴法、選擇器前綴法以及IE條件註釋法(即HTML頭部引用if IE) Hack,實際專案中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。

屬性前綴法(即類別內部Hack):例如IE6能辨識底線"_"與星號" * ",IE7能辨識星號" * ",但無法辨識底線"_",IE6~ IE10都認識"\9",但firefox前述三個都不能認識。
選擇器前綴法(即選擇器Hack):例如 IE6能辨識*html .class{},IE7能辨識*+html .class{}或*:first-child+html .class{}。
IE條件註解法(即HTML條件註解Hack):針對所有IE(註:IE10+已經不再支援條件註解): 3b91107ae0f6dc60cbcc0243262d767fIE瀏覽器顯示的內容365479cd1a593fd7259a0d26b86e81d9,針對IE6及以下版本: 77ff45aa02bda806843bc31600e44271只在IE6-顯示的內容1b771f47d72d900ba74308aee59557f0。這類Hack不只對CSS生效,對寫在判斷語句裡面的所有程式碼都會生效。
  
CSS hack書寫順序,一般是將適用範圍廣、被辨識能力強的CSS定義在前面。

CSS hack方式一:條件註解法
 
這種方式是IE瀏覽器專有的Hack方式,微軟官方推薦使用的hack方式。舉例如下

只在IE下生效
3b91107ae0f6dc60cbcc0243262d767f
這段文字只在IE瀏覽器顯示
32e58b5d176aa7c802edc3635d7b0000

只在IE6下生效
32bf6dd8d9e9c69afb95af0b0e5e6991
這段文字只在IE6瀏覽器顯示
60453962d656d01b50acc4a3185457fa

只在IE6以上版本生效
91029187a47d4c3a99cc198a5627b173
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
1b771f47d72d900ba74308aee59557f0

只在IE8上不生效
b11c5b9bbe769c6575cf277092ba7f0b
這段文字在非IE8瀏覽器顯示
1b771f47d72d900ba74308aee59557f0

非IE瀏覽器生效
dbf5feeb0d676154b00e7fac3915442f
這段文字只在非IE瀏覽器顯示
1b771f47d72d900ba74308aee59557f0

CSS hack方式二:類別內屬性前綴法
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能辨識的hack前綴,以達到預期的頁面展現效果。

IE瀏覽器各版本 CSS hack 對照表

###IE6(Q)IE7(S)##IE7(Q)IE8(S)IE8(Q)IE9(S)IE9(Q)#IE10(S)IE10(Q)#* *顏色青色YYYYN# YNYNY#++顏色綠色YYY#YNYNYNY-##NN NNN__顏色藍色YYNYN##紫色YYY#Y##Y#N YNY#\0顏色:紅色\0##NYNYN#\9\0##N# NYNYN! #顏色:藍色! ##Y


说明:在标准模式中

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
demo如下

<script type="text/javascript">   
    //alert(document.compatMode);   
</script>   
<style type="text/css">   
body:nth-of-type(1) .iehack{   
    color: #F00;/* 对Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ,选择器也适用几乎全部Mobile/Linux/Mac browser*/
}   
.demo1,.demo2,.demo3,.demo4{   
    width:100px;   
    height:100px;   
}   
.hack{   
/*demo1 */
/*demo1 注意顺序,否则IE6/7下可能无法正确显示,导致结果显示为白色背景*/
    background-color:red; /* All browsers */
    background-color:blue !important;/* All browsers but IE6 */
    *background-color:black; /* IE6, IE7 */
    +background-color:yellow;/* IE6, IE7*/
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
    background-color:purple\0; /* IE8, IE9, IE10 */
    background-color:orange\9\0;/*IE9, IE10*/
    _background-color:green; /* Only works in IE6 */
    *+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */
}   

/*可以通过javascript检测IE10,然后给IE10的<html>标签加上class=”ie10″ 这个类 */
.ie10 #hack{   
    color:red; /* Only works in IE10 */
}   

/*demo2*/
.iehack{   
/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序
IE6显示为:绿色,
IE7显示为:黑色,
IE8显示为:红色,
IE9显示为:蓝色,
Firefox/Chrome显示为:橘色,
(本例IE10效果同IE9,Opera最新版效果同IE8)
*/
    background-color:orange;  /* all - for Firefox/Chrome */
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */
    background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */
    *background-color:black;  /* ie 6/7 - for ie7 */
    _background-color:green;  /* ie 6 - for ie6 */
}   

/*demo3
实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序
IE6显示为:红色,
IE7显示为:蓝色,
IE8显示为:绿色,
IE9显示为:粉色,
Firefox/Chrome显示为:橘色,
(本例IE10效果同IE9,Opera最新版效果也同IE9为粉色)
*/
.element {   
    background-color:orange;    /* all IE/FF/CH/OP*/
}   
.element {   
    *background-color: blue;    /* IE6+7, doesn&#39;t work in IE8/9 as IE7 */
}   
.element {   
    _background-color: red;     /* IE6 */
}   
.element {   
    background-color: green\0; /* IE8+9+10  */
}   
:root .element { background-color:pink\0; }  /* IE9+10 */

/*demo4*/
/*
该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack,本例特别要注意顺序
IE6显示为:橘色,
IE7显示为:粉色,
IE8显示为:黄色,
IE9显示为:紫色,
IE10显示为:绿色,
Firefox显示为:蓝色,
Opera显示为:黑色,
Safari/Chrome显示为:灰色,
*/
.hacktest{    
    background-color:blue;      /* 都识别,此处针对firefox */
    background-color:red\9;      /*all ie*/
    background-color:yellow\0;    /*for IE8/IE9/10 最新版opera也认识*/
    +background-color:pink;        /*for ie6/7*/
    _background-color:orange;       /*for ie6*/
}   

@media screen and (min-width:0){    
    .hacktest {background-color:black\0;}  /*opera*/
}    
@media screen and (min-width:0) {    
    .hacktest { background-color:purple\9; }/*  for IE9/IE10  PS:国外有些习惯常写作\0,根本没考虑Opera也认识\0的实际 */
}   
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    
   .hacktest { background-color:green; } /* for IE10+ 此写法可以适配到高对比度和默认模式,故可覆盖所有ie10的模式 */
}   
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} }  /*for Chrome/Safari*/

/* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用!如果二者合用,必要时在@media样式加入 !important 才能区分IE9和IE10 */
/*
:root .hacktest { background-color:#963\9; } 
*/
</style>

demo1是测试不同IE浏览器下hack 的显示效果
IE6显示为:粉色,
IE7显示为:粉色,
IE8显示为:蓝色,
IE9显示为:蓝色,
Firefox/Chrome/Opera显示为:蓝色,
若去掉其中的!important属性定义,则IE6/7仍然是粉色,IE8是紫色,IE9/10为橙色,Firefox/Chrome变为红色,Opera是紫色。是不是有些奇怪:除了IE6以外,其他所有的表现都符合我们的期待。那为何IE6表现的颜色不是_background-color:green;的绿色而是*+background-color:pink的粉色呢?其实是最后一句所谓的IE7私有hack惹的祸?不是说*+是IE7的专有hack吗???错,你可能太粗心了!我们常说的IE7专有*+hack的格式是*+html selector,而不是上面的直接在属性上加*+前缀。如果是为IE7定制特殊样式,应该这样使用:

*+html #ie7test { /* IE7 only*/
color:green;
}
经过测试,我发现属性前缀*+background-color:pink;只有IE6和IE7认识。而*+html selector只有IE7认识。所以我们在使用时候一定要特别注意。

demo2实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序
IE6显示为:绿色,
IE7显示为:黑色,
IE8显示为:红色,
IE9显示为:蓝色,
Firefox/Chrome显示为:橘色,
(本例IE10效果同IE9,Opera最新版效果同IE8)

demo3实例也是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序
IE6显示为:红色,
IE7显示为:蓝色,
IE8显示为:绿色,
IE9显示为:粉色,
Firefox/Chrome显示为:橘色,
(本例IE10效果同IE9,Opera最新版效果也同IE9为粉色)

demo4实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack,本例特别要注意顺序
IE6显示为:橘色,
IE7显示为:粉色,
IE8显示为:黄色,
IE9显示为:紫色,
IE10显示为:绿色,
Firefox显示为:蓝色,
Opera显示为:黑色,
Safari/Chrome显示为:灰色,

最全的CSS hack方式一览(兼容多浏览器)

CSS hack方式三:选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
等等
结合CSS3的一些选择器,如html:first-child,body:nth-of-type(1),衍生出更多的hack方式,具体的可以参考下

最全的CSS hack方式一览(兼容多浏览器)
CSS3选择器结合JavaScript的Hack
我们用IE10进行举例:

由于IE10用户代理字符串(UserAgent)为:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0),所以我们可以使用javascript将此属性添加到文档标签中,再运用CSS3基本选择器匹配。

JavaScript代码:



复制代码

代码如下:


var htmlObj = document.documentElement;
htmlObj.setAttribute('data-useragent',navigator.userAgent);
htmlObj.setAttribute('data-platform', navigator.platform );

CSS3匹配代码:



复制代码

代码如下:


html[data-useragent*='MSIE 10.0'] #id {
color: #F00;
}

CSS hack利弊
一般情況下,我們盡量避免使用CSS hack,但是有些情況為了顧及用戶體驗實現向下兼容,不得已才使用hack。例如由於IE8及以下版本不支援CSS3,而我們的專案頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染,這種情況下如果不使用css3pie或htc或條件註解等方法時,可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處,但過多的濫用會造成html文件混亂不堪,增加管理和維護的負擔。相信只要大家一起努力,少用、慎用hack,未來一定會促使瀏覽器廠商的標準越來越趨於統一,順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack,必將減輕我們編碼的複雜度,少做無用功。

最後補上一張引自國外某大牛總結的CSS hack表,這時一張6年前的舊知識匯總表了,放在這裡僅供需要時候方便參考。

最全的CSS hack方式一览(兼容多浏览器)

說明:本文測試環境為IE6~IE10,Chrome 29.0.1547.66 m,Firefox 20.0.1 ,Opera 12.02等。一邊工作,一邊總結,總結了幾天寫下整理好,今天把它分享出來,文中難免有紕漏,如大俠發現請及時告知! 


更多最完整的CSS hack方式一覽(相容多瀏覽器)相關文章請關注PHP中文網!


hack 寫法 實例 #IE6(S)
##-顏色 黃色 Y Y N #N N
##Y # #N Y N N
##N
# #紅色 N N N #N Y
##顏色:紅色\9 \0 粉紅色 N N N N
Y N Y N #Y
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn