一聚教程网:一个值得你收藏的教程网站

热门教程

IE6,IE7,IE8,Firefox兼容的css hack详解

时间:2022-06-25 11:22:02 编辑:袖梨 来源:一聚教程网

已经发布过关于这CSS兼容的hack的文章不止一篇,可是有太多,都已经失效,再次发布,不想谈什么乱七八糟的理论,直接上实例!如下:
IE浏览器都能识别“*” “\9”;标准浏览器(如FF)不能识别“*”;
IE6能识别“_” “+” “#” “@”, 同一属性有两个的只看后者 无论有没有 如果是两句它就能识别“!important”;
IE7能识别“+” “#” “@” “!important”,不能识别“_”;
FF能识别“!important”,不能识别“_” “+” “#” “@”;
 
以上是我自己测试的结果,如有差错还请指出~,或者你有好的兼容方法,

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
例如:

 代码如下 复制代码
select{
Color:blue;//所有浏览器
Color:yellow\9;//所有IE浏览器
*Color:red;//forIE7
_color:green;//forIE6
}

关注过IE8的css hack的人相信大家都在使用这个hack,就是“9”的css hack:
其中:OP表示Opera,SA表示Safari,Ch表示Chrome;当然你如果还有耐心可以测试“\14”,“\15”,“\16”。。。
从上面测试结果我们可以看出“\0”的写法只被IE8识别,ie6,ie7都不能识别,那么“\0”应该是IE8的真正hack。主流浏览器的CSS hack这样更好一些:

 代码如下 复制代码
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\0; /* IE8支持*/
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}  

 其中:OP表示Opera,SA表示Safari,Ch表示Chrome;
关注过IE8的css hack的人相信大家都在使用这个hack,就是“9”的css hack:

 代码如下 复制代码
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和“_”的css hack;所以我们可以这样写hack */
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}

color:#0000FF\9的hack支持IE6-IE8(其他版本没有测试),但是IE8不能识别“*”和“_”的css hack,所以我们可以使用
color:#0000FF\9; ;/*ie6,ie7,ie8*/
*color:#FFFF00;/*ie7*/
_color:#FF0000;/*ie6*/ 来区分IE的各个版本。

最后带上微软在IE8提供三种解析页面的模式


  IE8 Standard Modes :默认的最标准的模式,严格按照W3C相关规定
  IE7 Standards Modes :IE7现在用的解析网页的模式,开起机关是在中加入
  Quirks Modes :IE5用的解析网页的模式,开起机关是删除HTML顶部的DOCTYPE声明
  注意:不同模式间的网页在IE8中可以互相 frame ,因此因不会模式下的DOM和CSS渲染不一样,所以会引发很多问题,务必注意如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:


 Example Source Code

  IE8 最新css hack:


  ”9″ 例:”margin:0px auto9;”.这里的”9″可以区别所有IE和FireFox.
  ”*” IE6、IE7可以识别.IE8、FireFox不能.
  ”_” IE6可以识别”_”,IE7、IE8、FireFox不能.

热门栏目