CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
CSS Hack表现形式
CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。
类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等
选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等
HTM[1]L头部引用(if IE)Hack:针对所有IE:,针对IE6及以下版本:,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
书写顺序,一般是将识别能力强的浏览器的CSS写在前面。
各种浏览器专属hack
- IE6 和 IE7
#hack{background-color:red;*background-color:green;}
- IE6
#hack{background-color:red;_background-color:green;}
- IE7
#hack{background-color:red;*background-color:green !important;}
注:!important 对IE6不起作用,但是IE7,IE8,IE9,FF,Chrome都支持,* 加 !important 可以唯一确定是IE7
- IE8和IE9
#hack{background-color:red;background-color:green\0;}
注: “\0”IE6,IE7不支持IE8+都支持
- IE9
#hack{background-color:red;background-color:green\9\0;}
注:“\9\0”IE9支持,IE8不支持。由于并没有找到专属于IE8的hack的写法,可以对IE8使用IE8和IE9共有的hack(即\0),如果测试IE9,有问题,再对IE9做专属的hack,这样可以解决IE8的hack问题。
- IE所有版本
#hack{background-color:red;background-color:green\9;}
注:“\9”对IE的所有版本有效,对FF,chrome无效
- Firefox
@-moz-document url-prefix() {#hack{background-color:yellow;}}
- chrome
@media screen and (-webkit-min-device-pixel-ratio:0) { #hack{background-color:blue;}}
注:针对GoogleChrome、Safari3.0、Opera9的CSS样式,由于很少对Opera最hack所以可以用这种方法对chrome做“专属”hack。