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

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

margin在FF/IE6/IE7中的兼容

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

解决方法一：

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

 
 
 

  
  
  
＜#DIVid=”imfloat”> 
  
  
  
相应的css为  
  
  
  
#imfloat{  
  
  
  
float:left;  
  
  
  
margin:5px;/*IE下理解为10px*/  
  
  
  
display:inline;/*IE下再理解为5px*/}  
 
 
 

解决方法二：

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

***种：

 
 
 

  
  
  
.DIV{  
  
  
  
background:orange;/*ff*/  
  
  
  
*background:green!important;/*IE7*/  
  
  
  
*background:blue;/*IE6*/  
  
  
  
}  
  
  
  
 
 
 
 

第二种：

 
 
 

  
  
  
.DIV{  
  
  
  
margin:10px;/*ff*/  
  
  
  
*margin:15px;/*IE7*/  
  
  
  
_margin:15px;/*IE6*/  
  
  
  
}  
  
  
  
 
 
 
 

第三种：

 
 
 

  
  
  
#DIV{color:#333;}/*ff*/  
  
  
  
*html#DIV{color:#666;}/*IE6*/  
  
  
  
*+html#DIV{color:#999;}/*IE7*/  
  
  
  
 
 
 
 

【编辑推荐】

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