IE6 float:left margin-left出现两倍像素

(编辑:jimmy 日期: 2024/9/22 浏览:2)

在IE6下(标准模式/怪异模式)
一个元素向左浮动(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都不会翻倍。

一句话新闻

Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。