IE6双边距BUG演示及解决方法

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 }

　　使用后效果如图：

posted @ 2016-04-07 20:39 抱头蹲防阅读(434) 评论(0) 收藏举报

抱头蹲防

IE6双边距BUG演示及解决方法