IE浏览器兼容问题（1）IE6的双倍外边距bug

最新推荐文章于 2025-08-25 15:05:26 发布

原创最新推荐文章于 2025-08-25 15:05:26 发布 · 399 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #html #css

ie浏览器兼容问题专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了IE6浏览器中遇到的双倍外边距问题，特别是针对向左或向右浮动元素时，外边距会变为设定值的两倍。文章通过实例展示了问题的现象，并提供了两种解决方案：一是针对IE6调整宽度，二是通过添加`display:inline`属性。推荐使用后者作为简洁有效的修复方法。

IE6的双倍外边距bug

IE浏览器兼容问题（1）IE6的双倍外边距bug
- 例子
- 解决方法

IE浏览器兼容问题（1）IE6的双倍外边距bug

在IE6中，当为一个向左浮动的元素设置左外边距，或者为一个向右浮动的元素设置右外边距时，这个外边距将会是设置的值的2倍。

例子

1.设置一个块元素为高宽100px的红色正方体。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ie6的双倍外边距bug</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box1{
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>

<body>
	<div class="box1"></div>
</body>
</html>

其在各个浏览器上显示为：
在这里插入图片描述

2.为红色正方体添加一个左侧的100px宽的外边距。

.box1{
			width: 100px;
			height: 100px;
			background: red;
			margin-left: 100px;
		}

其在各个浏览器上显示为
如图所示，红色方块的位置向右移动了100px
如图所示，红色方块div的位置向右移动了100px。

3.为红色方块div设置向左浮动。

.box1{
			width: 100px;
			height: 100px;
			background: red;
			margin-left: 100px;
			float: left;
		}

非ie6浏览器中的表现与上文中未添加浮动时的位置一致；
在这里插入图片描述

ie6中的表现如下：
在这里插入图片描述
由图可以清楚的看到ie6中红色方块div的位置相比其他浏览器更靠右，经过测量是200px，是代码中所设置左外边距宽度的两倍。

也就是说产生了ie6的双倍边距bug！

解决方法

1.既然只在ie6中出现双倍边距的bug，那么可以只单独为ie6设置规定数减半的宽度（如需要设置100px宽的外边距，则单独为ie6设置为50px宽）

.box1{
			width: 100px;
			height: 100px;
			background: red;
			margin-left: 100px;
			_margin-left:50px;
			float: left;
		}

这个方式可以达到预期的效果，但太麻烦！每次页面产生变动都需要单独考虑ie6的外边距问题，所以不推荐这个方式！

2.通过添加display:inline来解决。

.box1{
			width: 100px;
			height: 100px;
			background: red;
			margin-left: 100px;
			_margin-left:50px;
			float: left;
			display: inline;
		}

display:inline可以将元素设置为行内元素

对于一个浮动元素来说，设置display:inline没有任何意义，且对该元素无其他影响，所以推荐使用该属性解决ie6的双倍外边距bug问题！

添加display:inline后ie6的双倍外边距bug得以解决：
在这里插入图片描述

IE浏览器兼容问题 （1）IE6的双倍外边距bug

IE6的双倍外边距bug

IE浏览器兼容问题 （1）IE6的双倍外边距bug

例子

解决方法

IE浏览器兼容问题（1）IE6的双倍外边距bug

IE浏览器兼容问题（1）IE6的双倍外边距bug