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

开发 前端
浏览器兼容问题一直大家比较关注的问题,这里向大家描述一下解决IE6、IE7、Firefox兼容的两种方案,分别是CSSHack和为不同的浏览器建立不同的.css方案。

这里向大家介绍一下解决IE6、IE7、Firefox兼容的两种方案,为不同的浏览器建立不同的.css方案,在用户浏览时,根据浏览器类型及版本号不同,分别加载不同的css文件,相信本文介绍一定会让你有所收获。

解决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判断或服务器端方法。这里关于IE6、IE7、Firefox兼容的两种方案介绍完毕,请关注本文其他相关报道。

【编辑推荐】

  1. CSS兼容:如何兼容IE7和IE8
  2. CSS布局中DIV为空时在IE6下的不同表现
  3. 探究IE8与IE7共存的两种方法
  4. CSS属性display:inline-block使用揭秘
  5. DIV CSS布局实例:建立Flash上面浮动层
责任编辑:佚名 来源: ropean.org
相关推荐

2010-08-20 09:39:43

IE6IE7Firefox

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-18 14:21:48

FirefoxIE7IE6

2010-08-20 09:33:22

IE6IE7IE8

2010-08-20 13:15:54

IE6IE7IE8

2010-08-19 14:19:12

IE6IE7IE8

2010-09-06 15:06:29

IE6IE7Firefox

2010-08-19 16:06:15

2010-08-27 14:55:23

IE6IE7IE8

2010-08-20 12:45:41

IE6IE7Firefox

2010-08-19 10:13:25

marginFFIE6

2010-08-18 15:22:28

IE6IE7Firefox

2010-09-16 13:17:31

IE6IE7IE8

2010-08-18 13:54:35

IE6IE7Firefox兼容

2010-08-17 16:27:52

IE6IE7IE8

2010-08-30 09:35:35

IE6IE7Firefox

2010-08-27 15:38:21

兼容IE6IE7

2010-08-27 13:31:58

IE6IE7Firefox

2010-08-18 15:57:14

IE6IE7IE8

2010-09-16 13:33:47

IE6IE7IE8
点赞
收藏

51CTO技术栈公众号