Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack。我们将CSS Hack代码放入条件样式文件中,符合条件的浏览器就解析,不符合的将不解析,从面达到您所需要的页面渲染效果。
总的一句话来说使用CSS Hack将会使你的CSS代码部分失去作用,然后借助条件样式,使用其原CSS代码在一些浏览器解析,而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。
针对的html代码:
<body>
<div><span>Text</span></div>
</body>
写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