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