CSSHACK写法全面兼容IE6 IE7 IE8 Firefox浏览器

开发 前端
浏览器市场的混乱,给设计师造成很大的麻烦,这里向大家介绍一下2010全面兼容IE6/IE7/IE8/Firefox的CSSHACK写法,希望对你有所帮助。

本文和大家重点讨论一下2010全面兼容IE6/IE7/IE8/Firefox的CSSHACK写法,这里和大家主要分享二种方法,相信本文介绍一定会让你有所收获。

2010全面兼容IE6/IE7/IE8/Firefox的CSSHACK写法

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来IE6跟Firefox之间的兼容是很容易解决的。加上个IE7会麻烦点,IE8的出现就更头疼了,原来hackIE7的方法又不能用了,怎么办呢?

第一种方法:

还好,微软提供了这样一个代码:

  1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/> 
  2.  

把这段代码放到<head>里面,在IE8里面的页面解析起来就跟IE7一模一样的了,所以,基本上可以无视IE8,剩下的代码只需要这样写就可以了

  1. background:#Firefoxc;/*对Firefox有效*/  
  2. *background:#ccc;/*对IE7有效*/  
  3. _background:#000;/*只对IE6有效*/  
  4.  

解释一下吧:

Firefox能解析第一段,后面的两个因为前面加了特殊符号“*”和“_”,Firefox认不了,所以只认background:#Firefoxc,看到的是黄色;

IE7前两短都能认,以最后的为准,所以最后解析是background:#ccc,看到的是灰色;

IE6三段都能认,而且“_”这个只有IE6能认,所以最后解析是_background:#000,看到的是黑色

已经是最简单和最好理解的写法了,如果你是google进来的,我可以很负责任的告诉你,这种方法是ok的,我测试过。

IE8的那段兼容7的代码我也测试过了,在我现在的windos7测试版所带的IE8是没问题的,以后IE8正式版出来还管不管用就不知道了。

ps:如果你发现按我这样写还是有问题的话,请查看一下你的html头,看看<head>之前的内容是不是这样的标准写法

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5.  

这个是现在比较规范的写法,如果你是用dreamweaver做页面的话,默认也是这种规范的,切记,非这种规范写法的,兼容性不能保证

第二种方法:

要求苛刻的朋友是不愿意在页面头部增加<metahttp-equiv="x-ua-compatible"content="IE=7"/>这样一句代码的,因为这样的结果是每个页面都得加。那么要想兼容这几个浏览器还真得想别的办法了。早些天本站发布了一篇《完美兼容IE6,IE7,IE8以及Firefox的css透明滤镜》,可能当时测试的疏忽,IE8的兼容性没有解决好,好多朋友回复说用不了。今天抽出些时间,查阅大量资料,终于解决了这个问题了。

以下是兼容IE6/IE7/IE8/Firefox的写法,注意下面的顺序不可颠倒

  1. margin-bottom:40px;/*Firefox的属性*/  
  2. margin-bottom:140px\9;/*IE6/7/8的属性*/  
  3. color:red\0;/*IE8支持*/  
  4. *margin-bottom:450px;/*IE6/7的属性*/  
  5.  

下面以一个实例的形式表现,大家可以运行代码查看一下效果

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  7. <title>2010最新全面兼容IE6,IE7,IE8,Firefox的CSSHACK写法——www.aa25.cn标准之路</title> 
  8. <styletypestyletype="text/css"> 
  9. #abc{  
  10. border:2pxsolid#00f;/*Firefox的属性*/  
  11. border:2pxsolid#090\9;/*IE6/7/8的属性*/  
  12. border:2pxsolid#F90\0;/*IE8支持*/  
  13. _border:2pxsolid#f00;/*IE6的属性*/  
  14. }  
  15. /*上下顺序不可以写错*/  
  16. </style> 
  17. </head> 
  18. <body> 
  19. <dividdivid="abc"> 
  20. <ul> 
  21. <li>Firefox下蓝边</li> 
  22. <li>IE6下红边</li> 
  23. <li>IE7下绿边</li> 
  24. <li>IE8下黄边</li> 
  25. <li>转载请注明来源标准之路<ahrefahref="http://www.68css.com">www.68css.com</a></li> 
  26. </ul> 
  27. </div> 
  28. </body> 
  29. </html> 
  30.  

提示:可以先修改部分代码后再运

文章出处:标准之路(http://www.aa25.cn/web_w3c/868.shtml)

【编辑推荐】

  1. IE8与IE7实现共存的两种方法揭秘
  2. IE与Firefox浏览器差异与常见问题一览
  3. JavaScript巧解IE6至IE8兼容问题
  4. 深入探究IE8和IE7的24个区别
  5. 使用X-UA-Compatible来设置IE8兼容模式
责任编辑:佚名 来源: aa25.cn
相关推荐

2010-09-16 13:17:31

IE6IE7IE8

2010-08-18 15:57:14

IE6IE7IE8

2011-06-03 15:41:27

CSS HACK

2010-08-17 15:07:48

IE6IE7IE8

2010-08-20 09:25:11

IE6IE7IE8

2010-08-20 09:33:22

IE6IE7IE8

2010-09-15 11:18:27

IE6IE7火狐

2010-09-15 10:19:12

IE6IE7IE8

2010-08-18 14:54:32

IE6IE7Firefox

2010-09-16 13:33:47

IE6IE7IE8

2010-08-18 14:21:48

FirefoxIE7IE6

2010-08-17 16:27:52

IE6IE7IE8

2010-08-20 10:52:26

2010-08-18 10:24:51

IE6IE7IE8

2010-08-20 13:08:41

IE6IE7IE8

2010-08-18 14:42:16

IE6IE7IE8

2010-09-15 11:32:37

IE6IE7浏览器兼容性

2010-08-19 10:56:55

JSIE6IE7

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7
点赞
收藏

51CTO技术栈公众号