IE6 双倍水平外边距BUG以解决方案

最新推荐文章于 2021-07-05 12:42:17 发布

何东狮吼

最新推荐文章于 2021-07-05 12:42:17 发布

阅读量2.1k

点赞数 1

分类专栏： css IE6 文章标签： ie class float 测试 div

本文链接：https://blog.csdn.net/hedong37518585/article/details/6638997

版权

css 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

IE6

17 篇文章 0 订阅

订阅专栏

出现条件：

1、没有设置display:inline的块元素

2、浮动元素

3、设置了水平外边距（浮动的方向和水平外边距设置的方向一致）

4、元素与父容器之间

备注：因为浮动都有其相对应的对象，只有相对于其父容器的浮动才会出现这样的问题。第一个元素是相对父容器的，而第二个是相对第一个兄弟元素的，所以第二个浮动元素不会出现双倍水平外边距问题。而且只有设置水平外边距的值才会出现双倍外边距，垂直外边距没有关系。

解决办法：给浮动块框设置display:inline解决问题

下面是测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE6 双倍水平外边距</title>
<style>
*{
	margin:0;
	padding:0;
}
.testbox{
	background:#CCC;
	width:100px;
	height:100px;
	margin:10px 0 0 10px;
	float:left;
	display:inline;/*去掉display:inline在IE6下看看效果*/
}
</style>
</head>

<body>
<div class="testbox">IE6浮动双倍外边距</div><div class="testbox">IE6浮动双倍外边距</div>
</body>
</html>

原因分析：这个现象仅当块框设置了浮动才会出现，行内框浮动不会出现此问题。因为行内框默认display:inline，给其float后自动就具有块框特性，所以如果是span之类的行内框，浮动后是不需要再单独设置display:inline就可以自动消除双倍水平外边距。

下面是测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE6 双倍水平外边距</title>
<style>
*{
	margin:0;
	padding:0;
}
.testbox{
	background:#CCC;
	width:100px;
	height:100px;
	float:left;
	margin:10px 0 0 10px;	
}
</style>
</head>

<body>
<span class="testbox">IE6浮动双倍外边距</span><span class="testbox">IE6浮动双倍外边距</span>
</body>
</html>

总结一下：

如果默认的是块元素例如div之类的，在设置 float 后同时要置display:inline来解决IE6的双倍水平外边距；

如果默认是内联元素例如span之类的，那么浮动后是没有关系的，因其自身居右display:inline，所以不需要再重复添加该属性。