第一种: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;

在理论上来说条件选择的那个方式最好用,但是那个东西不利于开发和维护,所以后面那两种比较流行,当然也都存在一定的向后兼容风险,这个要看具体情况了。

 

 

 

 

 

 

posted on 2011-11-22 16:54  o小伟o  阅读(274)  评论(0编辑  收藏  举报
Powered by:
博客园
Copyright ©2012 o小伟o