问题描述:
一个div盒子如果设置了margin,并且该div设置了float浮动,那么在IE6下便会产生双边距问题:如果设置 float:left 那么左边距会是原来margin的两倍;如果是float:right,那么右边距会是原来margin的两倍。
代码如下:
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
float:left;
margin:10px;
width:200px;
height:200px;
background:#696969;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
如下是各浏览器的效果图(左侧为chrome 中间为firefox 右侧是IE6):
从上面图中可以看到,最右侧的IE6的左边距是原本边距的2倍。
解决方法:
在2004年以前,IE6这个双边距问题一直没有得到一种很好的解决方法,普遍的做法是把边距设置为目标边距的1/2,以错对错的方法去实现。2004年之后,有一个工程师发现了一个简单的解决方法,到现在也是一直用这个方法来消除IE6双边距问题的。方法很简单:只需要给id为box的这个div加上一条简单的css代码就够了。
解决代码:
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
_display:inline;
float:left;
margin:10px;
width:200px;
height:200px;
background:#696969;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
如下是IE6的测试效果图:
备注:
只需要加上" _display:inline; "就可以了。 因为在IE7以及IE7以上的IE版本中,这个双边距的bug已经修正,前缀符号"_"只有IE6能够识别,所以只需要让IE6去设置这个属性就足以。
浏览器兼容性经典问题(三) IE6 不支持min-width属性