IE6,IE7及FF火狐浏览器的区别和兼容方法

开发 前端
本文向大家介绍一下IE6,IE7及FF火狐浏览器的区别和兼容方法,IE7与IE6相比,有多达200多处改进,但它们都是在StrictMode下实现的,下面就看一下这几款浏览器的区别和如何实现兼容吧。

你对IE6,IE7及FF火狐浏览器的区别和兼容方法是否熟悉,这里和大家分享一下,相信本文介绍一定会让你有所收获。

IE6,IE7及FF火狐浏览器的区别和兼容方法

1.IE7与IE6相比,有多达200多处改进,但它们都是在StrictMode下实现的,即在页首声明DocType为XHTMLTransitional,XHTMLStrict等.而在QuirksMode下,IE7和IE6别无二致。所以为了更好的兼容,尽量声明DocType,采用StrictMode进行制作。

2.IE7支持Alpha通道的PNG图片,但是这些Alpha通道图片在IE6下还是不能正常显示的,所以还是尽量使用透明GIF图片。

3.IE7盒子模型改变了:盒子对于"overflow"使用了"visible"默认值,所以对于子元素尺寸大于父元素尺寸时,IE7会和Firefox一样将子元素露出于父元素之外显示,而不是像IE6那样把父元素撑大了包含子元素.把页面设置成"overflow:visible"即可。

4.设置为float的div在ie下设置的margin会加倍。这是一个ie6存在的bug。解决方案是在这个div里面加上"display:inline"。

5.IE和火狐对'width'定义的不同:

Firefox中:容器占的宽度=内容宽度+padding宽度+border宽度;

IE中:内容宽度=您定义的容器宽度(InternetExplorer'width')-padding宽度-border宽度
(InternetExplorer'width'则是指整个容器的宽度,包括内容,padding,border)

6.css布局的居中问题:FF火狐里设置margin-left,margin-right为auto时已经居中,IE则设置body{TEXT-ALIGN:center;}才行

7.FF火狐设置padding后,div会增加height和width,但IE不会,故需要用!important多设一个height和width

8.在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}

9.ul标签在FF火狐中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}

10.终结解决方法:

(1)!important:FF火狐和IE7对于"!important"会自动优先解析,IE6则忽略,可用!important为FF火狐和IE7单独设置样式,不影响IE6的显示,值得注意的是,一定要将xxxx!important这句放置在另一句之上。

示例:div{margin:30px!important;margin:15px;}//在FF火狐和IE7中margin:30px,在IE6中margin:15px;

(2)由于FF火狐和IE7都支持"!important",而二者之间也存在差异,所以有时也会出现一些小问题,针对IE7可以使用使用"*+html"。

示例

  1. :#example{color:#333;}/*FF火狐下字体颜色显示为#333*/  
  2. *html#example{color:#666;}/*IE6下字体颜色显示为#666*/  
  3. *+html#example{color:#999;}/*IE7下字体颜色显示为#999*/  
  4.  

【编辑推荐】

  1. IE6不支持的五大CSS选择符
  2. IE6.0对padding的解读分析
  3. IE6 IE7 IE8三大浏览器的CSS兼容速查表
  4. DIV+CSS开发Xhtml网页对SEO优化的影响
  5. DIV CSS网页布局中对段落进行排版的方法

 

 

责任编辑:佚名 来源: bdky.cn
相关推荐

2010-09-15 10:57:25

IE6IE7FF

2010-09-15 11:18:27

IE6IE7火狐

2010-08-17 16:18:23

IE6IE7FF

2010-08-27 13:26:16

IE6IE7FF

2010-08-17 16:27:52

IE6IE7IE8

2010-09-15 11:32:37

IE6IE7浏览器兼容性

2010-08-17 15:07:48

IE6IE7IE8

2010-08-20 09:25:11

IE6IE7IE8

2010-08-18 14:21:48

FirefoxIE7IE6

2010-08-20 08:45:55

IE6IE7IE8

2010-08-18 13:45:07

IE6IE7FF

2010-08-19 16:38:33

IE6IE7Firefox

2011-06-03 15:41:27

CSS HACK

2010-09-15 10:19:12

IE6IE7IE8

2010-08-20 10:52:26

2010-08-18 14:54:32

IE6IE7Firefox

2010-08-20 13:08:41

IE6IE7IE8

2010-08-19 10:13:25

marginFFIE6

2010-08-20 12:45:41

IE6IE7Firefox

2010-09-06 15:06:29

IE6IE7Firefox
点赞
收藏

51CTO技术栈公众号