IE6/IE7/FF的Hack写法

Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。

总的一句话来说使用CSS Hack将会使你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。

针对的html代码：

 
   

Text

 


写CSS代码，分别在IE6、IE7、FF下显示不同的效果：

IE6的划线是在下边、IE7是中间、FF是上边。因为IE6兼容性最差，所以优先级自然低了，何况它的hack方法就是采用下划线；IE7比较中规中矩；FF则最标准了，这下能记住各个图对应的是哪个浏览器了吧

第一种方法：
div{ 
    text-decoration:overline; 
    *text-decoration:line-through; 
    _text-decoration:underline; 
}

原理是：

简单地说，就是利用下面几点： 
1.各个浏览器解析CSS的语法不尽相同 
2.CSS语法规则：后面的属性覆盖前面的属性 
而这里仅仅是利用了_（这个很好记，IE6的专属）和*（用于IE6和IE7），接下来利用一下!important语法。

第二种方法： 
!important语法针对的是“后面的属性覆盖前面的属性”这一语法，也就是说标识了!important的属性，是不被后面的相同属性所覆盖的，而IE6忽略（其实是支持的）这个，导致其他浏览器很容易根据这点“欺负”IE6：
div{ 
    text-decoration:overline; 
    *text-decoration:line-through!important; 
    *text-decoration:underline; 
}

原理： 
1.FF不认识*，但IE6/IE7认识 
2.IE6不认识!imprtant，important提升优先级（或看成强制重定义），但IE7认识

IE6是支持!important属性的（该属性为CSS1语法，支持IE4+），上面的写法只是IE6的一个bug（同一个{}里面，相同属性取后者）

注意，顺序不能换，如果改为下面这样：

text-decoration:overline; 
*text-decoration:underline; 
*text-decoration:line-through !important;

IE6和IE7都一样了。

若想要IE6支持，一般的做法是将CSS拆分，比如：
div{
    text-decoration:line-through!important; 
}
div{
    text-decoration:underline;
}
这样，在IE6下，显示的是line-through效果。

第三种方法：
先看一个表

为了方便记忆，在上面那个hack表增加了“针对对象”一列（关于*旁边有无空格均可，可以理解其同时也作为分隔符），需要补充的是IE7的专属写法：*+html div

在此就利用IE6和IE7的专属写法：

div{ 
    text-decoration:overline; 
} 
*+html div{ 
    text-decoration:line-through; 
} 
* html div{ 
    text-decoration:underline; 
}



第四种方法：
div{ 
    text-decoration:overline; 
} 
html*div{ 
    text-decoration:line-through !important; 
    text-decoration:underline; 
}

原理：利用IE6/IE7的共同专属 + IE6不懂!important



第五种方法：
body>div{ 
    text-decoration:overline; 
    *text-decoration:line-through; 
} 
div{ 
    text-decoration:underline; 
}

原理：利用IE6不懂>这种选择符 + 针对属性的hack