首页 专题 H5案例 前端导航 UI框架

CSS hack合集

作者:TG 日期: 2017-02-27 阅读: 3144
本来已经抛弃IE6|7|8了,可是最近发现要考虑IE兼容性的网站还是有不少的,所以这两天了解了一下CSS HACK,在这里简单地总结一下!


1、何为HACK?

简单的说,HACK就是只有特定浏览器才能识别这段hack代码。Hack也可以说是让前端最为头疼的问题,因为要写N多种兼容代码。当然,IE是最让人蛋疼的。

一般来说,CSS HACK有3种表现形式:
  • CSS属性前缀法::比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但firefox对前面三个都不能认识。
  • CSS选择器前缀法:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
  • IE条件注释法:针对所有IE, <!--[if IE]>IE浏览器显示的内容 <![endif]-->。比如:针对IE6及以下版本: <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效(注:IE10+已经不再支持条件注释)。

下面将对这三种形式一一分析!

2、CSS 属性前缀法

这里提供一个测试实例(所有下面的代码都可以在这个实例里找到):测试实例

(1)IE6(_)

.test1 { _color: red; }


(2)IE7及其以下版本(*)

如下设置,IE7及其以下版本中都会生效:

.test2 { *color: yellow; }

如果是在选择器上设置,则只会在IE6中生效:

*html .test { color: gold; }


(3)IE6/IE7/IE8(\9)

网上的资料说只有IE6/IE7/IE8中生效,可是经测试,在IE9/IE10中也同样生效(如果知道原因的,请告知):

.test3 { color: purple\9; }


(4)IE8/IE9/IE10/IE11(\0)

在IE8/IE9/IE10/IE11中生效:

.test4 { color: green\0; }


(5)IE6(-)

在IE6中生效:

.test5 { -color: pink; }


(6)IE6/IE7(+)

在IE6/IE7中生效:

.test6 { +color: gold; }


(7)IE6/IE7(*+)

如果在类的属性上加,会在IE6/IE7都生效:

.test7 { *+color: blue; }


如果在选择器上加,只会在IE7生效:

*+html .test { color: black; }


(8)!important

除了IE6,其他浏览器中都生效:

.test8 { color: #fff !important; }


(9)IE9/IE10(\9\0)

.test9 { color: orange\9\0; }


一般写HACK的顺序:从最新版本到低版本,比如:新版本、IE(10/9/8)、IE(7/6)

color: black;  /* 所有 */

color: white !important; /* 除了IE6外 */

color: orange\9\0; /* IE 9/10 */

color: green\0;  /* IE 8/9/10 */

*color: yellow;   /* IE6/7 */

+color: gold;  /* IE6/7 */

*+color: blue; /* IE6/7 */

_color: red;  /* IE6 */


3、CSS选择器前缀法

(1)*

只在IE6中生效:

*html .test21 { color: gold; }


(2)*+

只在IE7中生效:

*+html .test22 { color: blue; }


(3)IE6/IE7
在IE6/IE7中生效:

@media screen\9 {   

  .test23 { color: purple; }  

}

(4)IE6/IE7/IE8
在IE6/IE7/IE8中生效:

@media \0screen\,screen\9 {   

  .test24 { color: gold; }  

}

(5)IE8
在IE8中生效:

@media \0screen {   

  .test25 { color: orange; }  

}

(6)IE8/IE9/IE10/IE11

在IE8/IE9/IE10/IE11中生效:

@media screen\0 {   

  .test26 { color: green; }  

}

(7)IE9/IE10/IE11
在IE9/IE10/IE11中生效:

@media screen and (min-width: 0\0) {   

  .test27 { color: red; }  

}


4、条件注释

下面的N表示版本。

(1)IE

<!--[if IE]> 所有IE中生效 <![endif]-->


(2)IE N

比如:只在IE 7中生效:

<!--[if IE 7]>  只在IE7生效 <![endif]-->


注意:版本之间要留空格,比如:IE7是无效的,应该是IE 7。

(3)gt

gt符号表示大于运算符。比如:在IE7以上(不包含IE7)生效

<!--[if gt IE 6]>  在IE6以上生效 <![endif]-->


(4)!

!符号表示非运算符。比如:在IE 6上不生效

<!--[if ! IE 6]>  在IE6上不生效(非IE6生效) <![endif]-->


也可以这样(所有IE都不生效):

<!--[if ! IE]>  所有IE中都不生效(非IE生效) <![endif]-->


(5)lt

lt符号表示小于运算符。比如:IE6以下(不包含IE6)版本

<!--[if lt IE 6]>  IE6以下可生效 <![endif]-->


(6)lte

lte符号表示小于或等于运算符:

<!--[if lte IE 6]>  IE6及IE6以下可生效 <![endif]-->


(7) gte

gte符号表示大于或等于运算符:

<!--[if gte IE 6]>  IE6及IE6以上可生效 <![endif]-->


(8)&

&符号表示AND运算符:

<!--[if (gt IE 6)&(lt IE 8)]> IE6版本以上且IE8版本以下可生效 <![endif]-->


(9) |

|符号表示OR运算符:

<!--[if (IE 6)|(IE 7)]>  IE6或IE7可生效 <![endif]-->


注:IE10+已经不再支持条件注释。

5、针对其他浏览器的HACK

(1)针对火狐

只在火狐中有效:

@-moz-document url-prefix() {

  .test { color: red; }

}


(2)支持所有Gecko内核的浏览器(包括火狐)


*>.test { color: blue; }


(3)针对Webkit内核浏览器


@media all and (min-width:0px) { color: purple; }


6、CSS选择器的优先级


相同权值情况下,CSS样式的优先级是:就近原则(也就是相同权值的,后设置的优先):

.a { color: red; }

.b { color: blue; }


<div class="b a">我会是蓝色的,而不是红色</div>

   

优先级规则:

  • 内联样式 > 嵌入样式 > 外部样式   
  • ID(100) > 类选择符(10) > 标签(1) > 通配选择器(*)
  • 在支持!important的情况下,其优先级最高。


参考文章:


如果发现有错误,欢迎在下方评论区指正!



关注”全栈技术杂货铺“

全栈技术杂货铺