IE8的css hack9 使用說明

首先感謝丸子提供的這個IE8的css hack;
關注過IE8的css hack的人相信大家都在使用這個hack,就是9的css hack:
.test{ color:#000000; /* FF,OP支持 */ color:#0000FF9; /* 所有IE瀏覽器(ie6 )支持 ;但是IE8不能識別*和_的css hack;所以我們可以這樣寫hack */ [color:#000000;color:#00FF00; /* SF,CH支持 */ *color:#FFFF00; /* IE7支持 */ _color:#FF0000; /* IE6支持 */ }包括我自己也是使用這種的,這是我前段時間整理的《主流瀏覽器的一些CSS hack》 。
很多人再研究color:#0000FF9;中的為什么IE6-IE8支持9寫法,和它的原理 , 我只是個工程師 , 不是科學家,我不懂為什么和它的真正原理,真的!很慚愧!
昨天在某個群里也看到部分前端工程師或網頁重構師勢利的一面,同樣的一個解決方案,大公司有名的前端工程師或網頁重構師寫的東西都追捧 , 而小公司沒名氣的前端工程師或網頁重構師寫的解決方案卻被反問:css有這種寫法嗎?看來你連最基本的css的幾個屬性和屬性值都沒搞懂;就算你解決了問題你寫的css也是不規范的,就是規范你跟我講講你解決方案的原理;同樣的一個解決方案 , 大公司有名的前端工程師或網頁重構師寫的這些反問質疑就全都沒了 , 拼命的去研究他這個解決方案,呵呵,我覺得那些人很可笑 。還有很多人問問題只有得到大公司有名的前端工程師或網頁重構師的肯定回答后才放心而又開心的走了 , 甚至不留一句謝謝 。當然沒人(包括我)否認大公司有名的前端工程師或網頁重構師在業界的影響力,他們為前端和重構業界做的貢獻大家都是看得到的,只是覺得做人(特別是我們做技術的)不能太勢利,多一點技術共享和探討,多一點感激,學習成長才是最重要的 。我承認我以前經常罵人,罵人家SB,內參國王說的對,罵人家SB就等于罵自己SB,我以前是很SB 。不想探討就看著唄,罵人是不對的!
扯遠了,回到IE8的CSS hack,講講color:#0000FF9:
color:#0000FF9的hack支持IE6-IE8(其他版本沒有測試),但是IE8不能識別*和_的css hack , 所以我們可以使用
color:#0000FF9; ;/*ie6,ie7,ie8*/
*color:#FFFF00;/*ie7*/
_color:#FF0000;/*ie6*/
來區分IE的各個版本 。
說明:在標準模式中

-減號是IE6專有的hack
9 IE6/IE7/IE8/IE9/IE10都生效
IE8/IE9/IE10都生效,是IE8/9/10的hack
9 只對IE9/IE10生效,是IE9/10的hack
測試代碼
script type=text/javascript//alert(document.compatMode);/scriptstyle type=text/cssbody: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:gray9; /* IE6, IE7, IE8, IE9, IE10 */background-color:purple; /* IE8, IE9, IE10 */background-color:orange9;/*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;/* ie 8/9/10/Opera - for ie8/ie10/Opera */background-color:blue9;/* 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’t work in IE8/9 as IE7 */}.element {_background-color: red;/* IE6 */}.element {background-color: green; /* IE8 9 10*/}:root .element { background-color:pink; }/* 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:red9;/*all ie*/background-color:yellow;/*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;}/*opera*/}@media screen and (min-width:0) {.hacktest { background-color:purple9; }/*for IE9/IE10PS:國外有些習慣常寫作,根本沒考慮Opera也認識的實際 */}@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:#9639; }*//style更多的介紹可以參考這篇文章:http://www.jb51.net/css/493362.html
至于為什么使用9我真的不清楚原因,但是丸子測試了其他0-13的數字,最終結果如下:

【IE8的css hack9 使用說明】

IE8的css hack9 使用說明

其中:OP表示Opera,SA表示Safari , Ch表示Chrome;當然你如果還有耐心可以測試, ,  。。。

從上面測試結果我們可以看出的寫法只被IE8識別,ie6,ie7都不能識別,那么應該是IE8的真正hack 。主流瀏覽器的 CSS hack這樣更好一些:

復制代碼代碼如下:
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF; /* IE8支持*/
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;
另外隨著google Chrome和Safari瀏覽器的流行,找google Chrome和Safari CSS hack的人也不少 。我也找了一下:

復制代碼代碼如下:
body:nth-of-type(1) .CH{
nbsp;nbsp; color: #FF0000;/* 這是專門針對Chrome和Safari的CSS hack */
}

相關經驗推薦