您的位置: 首页好东西故障/设置 → IE6下float 产生双倍margin的问题

IE6下float 产生双倍margin的问题

我要评论 2012/04/06 00:00:00来源:互联网 编辑:当易小编 [ ] 评论:0 点击:631次

假如为一个div设置css:

float:left;
margin-left:10px;

在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。

解决方法:

为这个div的css中添加:

display:inline;
这个是ie6的bug,下面还有更好的解决办法!
借助于padding样式和!important标记,可以实现Firefox与IE6的兼容效果。
 
<div style="clear: both; float: none;">
借助于padding样式和!important标记,可以实现Firefox与IE6的兼容效果。
</div>
<div style="border: 1px solid blue; float: left; clear: both; padding-bottom: 0px !important; padding-bottom: 100px;">
                     <div style="border: 1px solid red; float: left;width: 100px; height: 100px; font-size: 12px; margin-top: 100px; margin-bottom: 100px; margin-left: 100px !important; margin-right: 100px !important; margin-left: 50px; margin-right: 50px;">
                            width: 100px;
                            height: 100px;
                            margin: 100px;
                     </div>
</div>
第一种: 
.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 */

关键词:双倍margin