CSS hack

时间：2014-08-05 21:47:30 收藏：0 阅读：233

CSS hack主要有三种方式：①IE条件注释；②选择符前缀；③样式属性前缀。由于IE浏览器在CSS解析上存在很多问题（可以百度，一堆的CSS bug），所以一般来说CSS hack都是针对IE浏览器来说的

1、IE条件注释（微软官方推荐的hack方式）。针对不同的IE版本，引入对应的CSS文件。注意，这里引入的是一个文件，因此很容易理解这种方法会极大的增加开发和维护的成本（想象一下，IE没更新一个版本，就要重写css代码。。。），所以经常使用的是后两种hack方式。但由于这是官方推荐的，这里还是会仔细的讲述一下

基本用法如下：

1 <!--[if IE]>
2 <link type="text/css" href="ie.css" ref="stylesheet" />   //这里不仅使用link标签，同样可以使用style、script等标签
3 <![endif]-->

扩展用法：

①指定IE版本：只在IE8下生效

<!--[if IE 8]>
<link type="text/css" href="ie.css" ref="stylesheet" />   
<![endif]-->

②针对某个版本以内的范围：使用关键字lt(小于)、lte(小于等于)、gt(大于)、gte(大于等于)、！(不等于)，如下代码表示ie.css文件只在IE8及以上本生效

<!--[if gte IE 8]>
<link type="text/css" href="ie.css" ref="stylesheet" /> 
<![endif]-->

2、选择符前缀：在CSS选择符前加一些只有特定浏览器才能识别的前缀，从而让某些样式只能被特定的浏览器识别

*html  .test{  // ....}    only for ie6
*+html .test{ // ....}    only for IE7
@media screen and (min-width:0\0){
             .test{ //....}    only for IE9  IE10    
}
@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){
             .test{ //....}    for  IE10+
}

注意：选择符前缀不能用于内联样式。

【Note】何为内联样式？

<span class="test" style="color:red;text-algin:center;">Hello World</span>

代码中style="color:red;text-algin:center;"定义的样式即为内联样式

3、样式属性前缀

.test{
    style:value;
    style:value\9;         //for all IE
    style:value\0/;          //for IE8-9 
    style/*\**/: val\9;    //for IE7-8 
    *style:value;         //for IE6-7 
    #style:value;         //for IE6-7
    +style:value;         //only for IE7
    _style:value;         //only for IE6
}

样式属性选择符可以用于内联样式。

CSS hack,布布扣,bubuko.com