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

前端技术 2023/09/09 CSS
在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都不会翻倍。

本文地址：https://www.stayed.cn/item/24208

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案