实现IE6、IE7、Firefox兼容的两种方案

开发 前端
本文和大家分享一下解决IE6、IE7、Firefox兼容的两种方案,主要包括CSSHack方法和用JS判断或服务器端方法,希望本文介绍对你的学习有所帮助。

IE6、IE7、Firefox兼容性问题一直是大家比较关注的话题,这里向大家介绍一下解决IE6、IE7、Firefox兼容的两种方案,相信本文介绍一定会让你有所收获。

解决IE6、IE7、Firefox兼容的两种方案

◆***种方案:CSSHack

具体写法很容易:

  1. #someNode  
  2. {  
  3. position:fixed;  
  4. #position:fixed;  
  5. _position:fixed;  
  6. }  
  7.  

***排给Firefox以及其他浏览器看
第二排给IE7(可能以后的IE8、IE9也是如此,谁知道呢)看
第三排给IE6以及更老的版本看

***的应用就是可以让IE6也“支持”position:fixed,而且,配合这个原理,可以做到不引入JavaScript代码(仅用IE6的expression),我这里有一个现成的页面,CSS如下写:

  1. #ff-r  
  2. {  
  3. position:fixed;  
  4. _position:absolute;  
  5. right:15px;  
  6. top:15px;  
  7. _top:expression(eval(document.compatMode&&  
  8. document.compatMode=='CSS1Compat')?  
  9. documentElement.scrollTop+15:  
  10. document.body.scrollTop+  
  11. (document.body.clientHeight  
  12. -this.clientHeight));  
  13. }  
  14.  

 ◆第二种方案:

为不同的浏览器建立不同的.css方案,在用户浏览时,根据浏览器类型及版本号不同,分别加载不同的css文件。

当然,这里又产生两种方案,用JS判断或服务器端方法。

附:各款浏览器对选择器的支持情况

在正常的selector{property:value;}的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一。

◆IE系列:

selector{+property:value;}在属性名前加上加号"+",这个Hack只有IE系列可以识别.
selector{*property:value;}在属性名前加上星号"*",这个Hack只有IE系列可以识别.
selector{_property:value;}在属性名前加上下划线"_",这个Hack只有IE系列(除IE7外)识别.
*htmlselector{property:value;}在选择器上运用继承法*htmlselector,这个Hack只有IE系列(除IE7外)可以识别.
html/**/>bodyselector{property:value;}在选择器上运用继承法html/**/>bodyselector,这个Hack只有IE系列(除IE7外)可以识别.
selector{property/**/:value;}在属性名和冒号":"之间加入注释,屏蔽IE6用.
selector/**/{property/**/:value;}在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释,屏蔽IE5和IE6用(不屏蔽IE5.5).
select/**/{property:value;}在选择器和花括号"{"之间加入注释,屏蔽IE5用.
*+htmlselector{property:value!important;}在选择器上运用继承法*+htmlselector再加上!important,这个Hack只有IE7可以识别.
Firefox:

*:lang(lang)selector{property:value!important;}用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.
Safari:

selector:empty{property:value!important;}用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.
Opera:

@mediaalland(min-width:0px){selector{property:value;}}利用特殊继承法进行定义的话,目前只有Opera可以识别.

◆对Hack的运用,最普遍的是CSS盒模型Hack,清除浮动Hack.

CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X:

  1. selctor{width:IE5.X宽度;voice-family:"\"}\"";  
  2.  
  3. voice-family:inherit;width:正确宽度;}  

清除浮动Hack 

  1. selector:after{content:".";display:block;height:0;clear:both;  
  2. visibility:hidden;}  

【编辑推荐】

  1. IE8与IE7实现共存的两种方法揭秘
  2. DIV层在IE6下被下拉框遮挡的解决方法
  3. JavaScript巧解IE6至IE8兼容问题
  4. IE6 IE7 IE8浏览器的兼容性对弈
  5. 使用X-UA-Compatible来设置IE8兼容模式

 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-09-15 08:41:25

IE6IE7Firefox兼容

2010-09-06 15:06:29

IE6IE7Firefox

2010-08-20 09:33:22

IE6IE7IE8

2010-08-20 12:45:41

IE6IE7Firefox

2010-09-16 13:17:31

IE6IE7IE8

2010-08-18 15:22:28

IE6IE7Firefox

2010-08-27 15:38:21

兼容IE6IE7

2010-08-18 15:57:14

IE6IE7IE8

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-30 09:35:35

IE6IE7Firefox

2010-09-16 13:33:47

IE6IE7IE8

2010-08-18 14:21:48

FirefoxIE7IE6

2010-08-20 08:45:55

IE6IE7IE8

2010-08-18 10:24:51

IE6IE7IE8

2010-08-17 16:18:23

IE6IE7FF

2010-08-18 13:54:35

IE6IE7Firefox兼容

2010-08-19 16:06:15

2010-08-18 14:54:32

IE6IE7Firefox

2010-09-15 10:57:25

IE6IE7FF

2010-08-20 13:15:54

IE6IE7IE8
点赞
收藏

51CTO技术栈公众号