IE6双边距bug演示
当为一个块级元素同时设置float和margin属性时,在IE6下元素的margin显示效果为原来的2倍。
简单的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0; padding:0; } .div0{ width:200px; height:200px; background-color:blue; margin:50px; } .div1{ margin-left:50px; float:left;
width:100px; height:100px; background-color:red; } </style> </head> <body> <div class="div0"> <div class="div1">adsfj</div> </div> </body> </html>
设置2个div,div1放在div0的里面,为div1设置左浮动,并且左外边距为50像素。如果正确显示的话,div1应该处于div0的水平居中位置。
下面是在IE6下和Firefox下显示的区别:
Firefox:
IE6:
从图可以明显的看到在IE6下div1的位置错误,margin-left值为设置值的2倍。
解决方法
1、为浮动元素设置display:inine
基于上面的例子,在div1的样式中加入display:inine。
1 .div1{ 2 margin-left:50px; 3 float:left;width:100px; 4 height:100px; 5 background-color:red; 6 display:inline; 7 }
之后,在IE6下的显示如下:
div1回到了正确的位置上。而其实为元素设置float的时候,该元素就已经被默认设置为display:block,所以display:inline这一句应该是被忽略的,在Firefox中也的却是忽略了display:inline。而为什么这样做就能觉得这个问题,我觉得应该没必要深究了:)
2、使用css hack
css hack可以参考这个CSS hack大全。
使用只有IE6能识别的下划线来为margin设值,设置的值为想要效果的一半,利用双倍边距这个bug来达到我们想要的效果。(书写的时候记得注意顺序,避免想要的属性被覆盖)
1 .div1{ 2 margin-left:50px; 3 _margin-left:25px; 4 float:left;width:100px; 5 height:100px; 6 background-color:red; 7 }
使用后效果如图: