背景
瀏覽器兼容性問題一直是前端工程中的棘手問題,特別是IE6扶供、7椿浓、8闽晦、9對W3C標(biāo)準(zhǔn)的支持有一定的缺陷,而國產(chǎn)瀏覽器大部分都是使用IE6/7,因此兼容低版本的IE就是顯得非常重要了唧垦。兼容IE的3種方案
經(jīng)過閱讀阿當(dāng)?shù)摹毒帉懜哔|(zhì)量代碼--Web前端開發(fā)修煉之道》和閱讀hao123的源碼歸納出四種流行的IE兼容性方案。
1.HTML條件注釋加載對應(yīng)版本的css文件
IE官方的HTML條件注釋是IE官方推出用于解決IE瀏覽器兼容性問題的方巧还。
頁面例子:
>這種方案的可以方便地刪除某個IE版本的兼容代碼麸祷,比如有一天IE6沒有了,可以刪除ie6.css,因為是IE官方推薦的喷面,因此也更穩(wěn)定走孽。
但是這種方案將標(biāo)準(zhǔn)代碼和兼容性代碼放在不同位置,不好維護(hù)磕瓷,理論上困食,兼容性代碼應(yīng)該放在標(biāo)準(zhǔn)代碼的后面。
######2.使用css樣式hack
給CSS樣式添加一些前綴符匾,那么該樣式聲明就只會被特別的瀏覽器識別莱睁,我們可 以通過這種方式進(jìn)行瀏覽器兼容處理仰剿。
/IE 8/9/10/11/
background: blue\0;
/IE 6/7/*
background: #cda;
/IE 6/
-background: red;
_background: red;
例子:
.test{
background: black;
/IE 7/
background: red;
/IE 6*/
_background: red;
}
>這種方式的優(yōu)點(diǎn)是標(biāo)準(zhǔn)樣式和兼容性代碼可以放在一起,但是不能保證最新的IE瀏覽器會不會因為識別這種兼容性代碼,而代碼新的兼容新問題琳彩。不過露乏,目前IE已經(jīng)停止發(fā)布涂邀,因此,我們可以放心使用了劳较。
######3.HTML條件注釋給html標(biāo)簽添加標(biāo)志class,通過標(biāo)志css寫兼容代碼
這個方案區(qū)別于前面兩個臊恋,前面兩個雖然CSS的兼容性代碼所存放的位置不同墓捻,但是代碼還是一樣的,都是使用_和\*等方式進(jìn)行兼容性處理撤卢。
這里通過給html標(biāo)簽添加class,y用來識別當(dāng)前的瀏覽器凸丸,進(jìn)而通過標(biāo)準(zhǔn)的CSS樣式處理兼容性問題屎慢!
**代碼**:
<!DOCTYPE html>
<html>
例子:
<!DOCTYPE html>
<html>
<head>
<style>
.color{
background: red;
}
/兼容性代碼,比css hack更好維護(hù)和穩(wěn)定/
.ie6 .color{
background: blue;
}
.ie7 .color{
background: #8bffe2;
}
.ie8 .color{
background: #ffa86c;
}
.ie9 .color{
background: #2ad42c;
}
/height=200/
.h200{
height: 200px;
}
</style>
</head>
<body>
<div class="color h200"></div>
</body>
</html>
>這個方案可以作為css 樣式前綴的hack方案腻惠,并且不用擔(dān)心將來瀏覽器的兼容問題欲虚,因為她是標(biāo)準(zhǔn)的。**[可以作為瀏覽器兼容的首選方案]()**欣喧。