第一种:IE条件式
因为IE对CSS的解析存在很多的问题,所有我们的CSS hack 大部分都是针对IE的。还有就是官方也有自己的CSS hack,那么看代码吧!
<!--[if IE]>
<link type="text\css" href="IE.css" rel="stylesheet"/>
<![endif]-->
这样就可以为IE加载定义好的CSS文件了。
我们还可以为不同的IE版本加载不同的CSS文件,例如:
<!--[if IE 6]>
<link type="text\css" href="IE6.css" rel="stylesheet"/>
<![endif]-->
如果我们想按照一定范围版本的IE进行hack,我们可以结合一些关键字来搞定。
lte 小于等于
lt 小于
gte 大于等于
gt 大于
! 表示不等于
具体的例子就不弄了,大同小异,有兴趣的可以试试。
这种方式的不仅对加载link标签有作用,而且对js、style等也是有作用的。
第二种:选择前缀式
这种方式还是挺常见的,就是在css 选择符前加一些只有特定的浏览器才能识别的前缀,例如 *html 只对IE6有效、*+html只对IE7有效。当然这种方式看似挺不错的,但是保不齐那天微软在后面的浏览器也识别了,那就有点惨了,所以还是第一种方式比较保险。
ps:*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
第三种:样式属性前缀式
这种方式的hack更常见,就是在样式属性下面加前缀,这样这些属性只有在特定的浏览器上才有效。例如 _ 只在 IE6 生效、* 只在IE6和IE7下生效。
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
ps:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
在理论上来说条件选择的那个方式最好用,但是那个东西不利于开发和维护,所以后面那两种比较流行,当然也都存在一定的向后兼容风险,这个要看具体情况了。