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

时间：2022-06-25 11:18:12 编辑：袖梨来源：一聚教程网

例1

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

代码如下

复制代码

IE6双空白边Bug

IE6双空白边bug

解决方法：

给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的兼容效果。

代码如下	复制代码
借助于padding样式和!important标记，可以实现Firefox与IE6的兼容效果。 width: 100px; height: 100px; margin: 100px;

第一种：

代码如下	复制代码
.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 */

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程