IE6双边距bug*

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
.red,.blue{ width: 200px; height: 200px; margin: 10px; float: left; /*float: right;*/}
.red { background-color: red; }
.blue { background-color: blue; }
</style>
<body>
	<div class="red"></div>
	<div class="blue"></div>
</body>
</html>

1、左浮动时

 float: left;

其他浏览器正常

ie6 最左边的块，出现左边距双倍

2、右浮动时

float: right;

其他浏览器正常

ie6 最右边的块，出现右边距双倍

由此：

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说，并不是，只有块状元素左浮动，且具有左外边距时才有这个BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug。

解决这个bug有两个方法：

1、给float的元素添加一个display:inline

（写个hack _display:inline 就行了，因为在IE7以及IE7以上的IE版本中，这个双边距的bug已经修正，前缀符号"_"只有IE6能够识别，所以只需要让IE6去设置这个属性就足以。）

2、给ie6写一个hack，其值是正常值的一半，即_margin-right:10px;这个方法不推荐，因为要加hack写法，而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。

其实这一个简单的bug早在4、5年前就应该写了的，现在写出来已经没有意义了，毕竟ie6时代已经过去了。

现在写出来只是为了立个flag吧，13年5月左右已经选择了从这个行业退出了，从事了别的工作，工作了一年多之后又选择了创业，开了个奶茶店，一直经营了大概两年左右，一直是亏损状态。什么七七八八的原因也不想说了，现今重新以一个前端回归这一行。

我是个记不住的人，说白了就是脑子不好，三年多之后对代码已经是陌生了，有些后悔当初没有把那些积累都记下来。现在又要重新开始，真是一阵头疼，希望今后有时间的时候尽量把学过的都记下来。

猜你喜欢