欢迎访问一虎网络旗下产品一虎网络官方网站!
一虎网络

IE6常见Bug2:双边距问题

来源:一虎网络 日期:2015-09-08 12:47:31 属于:浏览器兼容专题
先看以下代码:

在IE6显示效果如下:
 
在火狐显示效果如下:
可以看到,在IE6中显示的红色区域的左边距实际为40px,是CSS代码中设置的20px的两倍,这是IE6的双边距BUG。当满足下面这三个条件时,就会出现这个BUG:
1、要为块状元素;
2、要左侧浮动;
3、要有左外边距(margin-left)。
解决这个BUG,只需在相应的块状元素的CSS属性中加入“display:inline;”。

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了,而且都有同方向的margin,只有最靠近浮动方向的元素才会有双边距bug。
解决这个bug有两个方法:
1、给float的元素添加一个display:inline
2、给ie6写一个hack,其值是正常值的一半,即_margin-right:10px;这个方法不推荐,因为要加hack写法,而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。

将display设置为inline后,就改变了BUG产生的条件之一(即必须是块状元素)。
但是熟悉规则的人知道:浮动元素自动设置为”block”元素,而不管他们之前是什么。这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,在IE6中阻止了浮动元素的边界翻倍。