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月左右已经选择了从这个行业退出了,从事了别的工作,工作了一年多之后又选择了创业,开了个奶茶店,一直经营了大概两年左右,一直是亏损状态。什么七七八八的原因也不想说了,现今重新以一个前端回归这一行。
我是个记不住的人,说白了就是脑子不好,三年多之后对代码已经是陌生了,有些后悔当初没有把那些积累都记下来。现在又要重新开始,真是一阵头疼,希望今后有时间的时候尽量把学过的都记下来。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页