蝙蝠公子和枯梅大师:IE6 IE7 FF的CSS Hack总结(转载) - john23.net - 博客园

来源:百度文库 编辑:九乡新闻网 时间:2024/04/27 21:48:17

IE6 IE7 FF的CSS Hack总结(转载)

  针对的html代码:

 
    

Text
 

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

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

  OK,开始我们的hack之旅吧。

  第一种方法:

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,但IE7认识

  注意,顺序不能换,如果改为下面这样:

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

  IE6和IE7都一样了。

  上网查了一下,IE6是支持!important属性的(该属性为CSS1语法,支持IE4+),上面的写法只是IE6的一个bug(同一个{}里面,相同属性取后者),若想要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

 

转自:http://edu.codepub.com/2009/1201/18383.php

 

区分IE6,IE7,firefox
  区别不同浏览器,CSS hack写法:
  区别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;_background:blue;
  background:orange;*background:green !important;*background:blue;
  注:IE都能识别*;标准浏览器(如FF)不能识别*;
  IE6能识别*,但不能识别 !important,
  IE7能识别*,也能识别!important;
  FF不能识别*,但能识别!important;