深入探究margin在FF IE6 IE7中的兼容问题

开发 前端
这里向大家简单描述一下margin在FF/IE6/IE7中的兼容,设置为float的DIV在IE下设置的margin会加倍。这是一个IE6都存在的bug。

本文和大家重点讨论一下margin在FF/IE6/IE7中的兼容,设置为float的DIV在IE下设置的margin会加倍。这是一个IE6都存在的bug。这里总结了两个解决方案希望对你的学习有所帮助。

margin在FF/IE6/IE7中的兼容

设置为float的DIV在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案我总结了两个,当然可能还有其他的方法,知道的可以留言分享呵呵。

解决方法一:

是在这个DIV里面加上display:inline。
如:

  1. <#DIVid=”imfloat”> 
  2. 相应的css为  
  3. #imfloat{  
  4. float:left;  
  5. margin:5px;/*IE下理解为10px*/  
  6. display:inline;/*IE下再理解为5px*/}  

 

解决方法二:

通过!important这样的手段hack。(这里面有3种形式)

***种:

  1. .DIV{  
  2. background:orange;/*ff*/  
  3. *background:green!important;/*IE7*/  
  4. *background:blue;/*IE6*/  
  5. }  
  6.  

第二种:

  1. .DIV{  
  2. margin:10px;/*ff*/  
  3. *margin:15px;/*IE7*/  
  4. _margin:15px;/*IE6*/  
  5. }  
  6.  

第三种:

  1. #DIV{color:#333;}/*ff*/  
  2. *html#DIV{color:#666;}/*IE6*/  
  3. *+html#DIV{color:#999;}/*IE7*/  
  4.  

【编辑推荐】

  1. IE6不支持的五大CSS选择符
  2. 探究IE8与IE7具体功能中窗口功能按钮的变化
  3. IE6 IE7 IE8三个版本的CSS兼容速查手册
  4. IE6下使用CSS定义DIV高度行之有效的办法
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题

 

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

2010-08-17 16:27:52

IE6IE7IE8

2010-08-17 16:18:23

IE6IE7FF

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-20 13:15:54

IE6IE7IE8

2010-08-18 14:32:07

IE6IE7IE8

2011-06-03 15:41:27

CSS HACK

2010-08-19 14:19:12

IE6IE7IE8

2010-09-15 08:41:25

IE6IE7Firefox兼容

2010-08-18 14:21:48

FirefoxIE7IE6

2010-08-18 15:22:28

IE6IE7Firefox

2010-09-15 10:57:25

IE6IE7FF

2010-09-06 15:06:29

IE6IE7Firefox

2010-09-15 11:08:48

CSSIE6IE7

2010-08-18 10:37:16

IE6IE7IE8

2010-08-27 14:55:23

IE6IE7IE8

2010-08-27 13:31:58

IE6IE7Firefox

2010-08-18 13:45:07

IE6IE7FF

2010-08-24 09:46:57

IE6IE7FF火狐

2010-08-18 10:24:51

IE6IE7IE8

2010-08-18 14:14:41

IE6IE7FF
点赞
收藏

51CTO技术栈公众号