CSS hack

针对不同的浏览器写出的CSS code就称为CSS hack.

1.HTML头部针对不同浏览器不同引入或语句

<!– 默认先调用正常的样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同。

 

2.CSS3中常针对不同的浏览器内核添加不同的前缀（W3C标准的放置最后)

-moz-transform: rotate | scale | skew | translate ;  /*Mozilla内核浏览器：firefox3.5+*/
-webkit-transform: rotate | scale | skew | translate ;  /*Webkit内核浏览器：Safari and Chrome*/
-o-transform: rotate | scale | skew | translate ;     /*Opera*/
-ms-transform: rotate | scale | skew | translate ;  /*IE9*/
transform: rotate | scale | skew | translate ;  /*W3C标准*/

 

3.针对IE系列不同的浏览器有针对的属性前缀或后缀 （针对所有浏览器的样式要放在最前面，越特殊的越靠后，和上面有有区别)

前缀	后缀	IE6	IE7	IE8	IE9	IE10	现代浏览器
-		√
+			√
*		√	√
	\9\0				√	√
	\0			√	√	√
	\9	√	√	√	√	√
	！important		√	√	√	√	√

例如：

background-color:blue;        /*所有浏览器*/
background-color:red\9;       /*所有的ie*/
background-color:yellow\0;   /* ie8+*/
+background-color:pink;       /*+ ie7*/

4.针对IE系列不同浏览器的选择器，（不常用）

	IE6	IE7	IE8	IE9	IE10
*html	√
*+html		√
:root				√

例如：

:root .test               /*只有IE9能识别*/
{
    background-color:green;
}

 

参考链接：http://www.cnblogs.com/dolphinX/p/3292630.html