Ie浏览器double margin bug 解决办法
2006-04-09 04:23
459 查看
原文地址:
http://www.positioniseverything.net/explorer/doubled-margin.html
用代码设置一个浮动容器floatbox浮动在主容器box的左边,设置floatbox的左边距margin-left让它距离box的左边有一段距离。
代码如下:
.floatbox{float:left;
width:150px;
height:150px;
margin:5px 0 5px 100px;
}
最后的一个100px设置了距离左边的margin,代码到现在为止很完美,但是在ie中打开时,ie却并不认为这样:
Ie 却加倍了margin-left的数字,成了上面这种情况。
注意:这个bug只有当浮动容器的margin和它浮动的方向一致时才会在这个浮动容器(floatbox)和主容器(box)的内边缘之间发生,所有跟在此后的有类似margin的浮动元素将不会再出现这种现象,只有一组浮动元素中的第一个受此bug的影响。而且,这个浮动bug对称分布,对右边的浮动同样如此。
解决办法:
在浮动容器中添加display:inline,如下:
.floatbox{float:left;
width:150px;
height:150px;
margin:5px 0 5px 100px;
display:inline;
}
Ok,开始看看吧~
http://www.positioniseverything.net/explorer/doubled-margin.html
用代码设置一个浮动容器floatbox浮动在主容器box的左边,设置floatbox的左边距margin-left让它距离box的左边有一段距离。
代码如下:
.floatbox{float:left;
width:150px;
height:150px;
margin:5px 0 5px 100px;
}
最后的一个100px设置了距离左边的margin,代码到现在为止很完美,但是在ie中打开时,ie却并不认为这样:
Ie 却加倍了margin-left的数字,成了上面这种情况。
注意:这个bug只有当浮动容器的margin和它浮动的方向一致时才会在这个浮动容器(floatbox)和主容器(box)的内边缘之间发生,所有跟在此后的有类似margin的浮动元素将不会再出现这种现象,只有一组浮动元素中的第一个受此bug的影响。而且,这个浮动bug对称分布,对右边的浮动同样如此。
解决办法:
在浮动容器中添加display:inline,如下:
.floatbox{float:left;
width:150px;
height:150px;
margin:5px 0 5px 100px;
display:inline;
}
Ok,开始看看吧~
相关文章推荐
- 【转载】IE浏览器常见的9个css Bug以及解决办法
- IE6 margin无效BUG解决办法之一
- IE浏览器解决margin:0 auto;不居中办法!
- 【IE浏览器】解决margin: 0 auto;不居中办法!
- 挑灯夜战 css hack 再次学习 IE浏览器常见的9个css Bug以及解决办法
- css hack 再次学习 IE浏览器常见的9个css Bug以及解决办法
- IE6中float:left后导致margin-left双倍边距的BUG解决办法就是是加上display:inline
- firefox,IE8中margin-top的bug及解决办法
- IE浏览器常见的9个css Bug以及解决办法
- IE浏览器解决margin:0 auto;不居中办法!
- java float 和 double 的 bug 和解决办法BigDecimal
- IE浏览器常见的9个css Bug以及解决办法
- 解决ie浏览器不兼容浮动float的办法
- IE浏览器下AJAX缓存问题导致数据不更新的解决办法
- margin:0 auto 在ie不居中的解决办法
- IE浏览器假死解决办法
- RCP: P2 Update两个烦人bug和解决办法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- <转>IE6浏览器网页文字溢出的解决办法(重复字符bug)---隐藏float对其他float造成影响
- 解决android:layout_marginBottom在RelativeLayout中无效的bug