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

ttx9n · 发表于 2013-1-10 14:33:02

一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:10px)，那么会自动的加一倍变成30px,接下来介绍如何解决此问题，感兴趣的朋友可以了解下在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都不会翻倍。

x20yd3qx · 发表于 2022-9-13 12:30:53

快更新啊，我擦

回复用户5 · 发表于 2022-10-7 04:51:00

儿童服务绯闻绯闻绯闻

feiyasqhr · 发表于 2023-3-2 02:35:53

激动人心，无法言表！

plvo189 · 发表于 2023-6-24 04:22:15

搞个免费的用用

locopy · 发表于 2023-9-10 13:08:10

啦啦啦啦啦啦啦啦！

adm1n · 发表于 2024-1-14 22:33:01

下载来瞧瞧

wangdj110 · 发表于 2024-3-21 01:59:21

哈哈哈哈哈哈

789456 · 发表于 2024-5-20 11:04:24

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

3mfwk4yf · 发表于 2024-6-24 21:04:27

非常vbcbvcvbvcb

账号		自动登录	找回密码
密码			立即注册

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

相关帖子