IE6中float造成margin值双倍解决办法-百分百源码网

IE6中float造成margin值双倍解决办法

发布时间：01/15 来源：浏览：关键词：

在ie6 下对于div的浮动，当设置了margin后，div可能占有的宽度是div的宽度加上两倍的margin值，解决此Bug只需要设置div的display属性为inline即可

例1

一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:10px)，那么会自动的加一倍变成30px。
例：

代码如下
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>IE6双空白边Bug</title> </head> <body> <div style="border:1px solid red;width:200px;"> <div id="d1" style="margin:0 0 0 10px;float:left;border:1px solid gray;"> IE6双空白边bug </div> <div style="clear:both;"></div> </div> </body> </html>

解决方法：

给div[id=d1]加：display:inline,当然只针对IE6一下，可以使用下划线加属性-display:inline，这样只有IE6能识别了。
边距翻倍只有当元素的边距碰到包含块时才发生。当一个元素被浮动到另一个浮动元素时不会翻倍。另marginTop和marginBottom都不会翻倍。

不知道大家有没有看懂没懂我们再看

例2

假如为一个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>

第一种：