• 每天进步一点点!

文章分类

推荐网站

常用手册

CSS Hack【原创】

<<返回

2013-05-20 10:41:34

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。

 

文章评论

  • 暂无评论

发表评论

昵称:

内容:

发表评论