IE BUG,margin 两倍
[导读]<style>#div_1 { background: #F00; overflow: auto; zoom: 1;}#div_2 { float: left; width: 100px; height: 100px; margin-left:100px; background: #FF0; /* display: inline; */}</style><div id...
<style>
#div_1 {
background: #F00;
overflow: auto;
zoom: 1;
}
#div_2 {
float: left;
width: 100px;
height: 100px;
margin-left:100px;
background: #FF0;
/* display: inline; */
}
</style>
<div id="div_1">
<div id="div_2"></div>
</div>
触发条件:
1、父元素包含子元素
2、子元素设置了浮动(float)
3、子元素设置了外边距(margin)
4、浮动方向和边距方向一致
解决方法:
IE6下看,#div_2的左边距会变成200PX,解决方法就是给#div_2加上display: inline;
站长itlearner注:有些人会担心,加了display:inline会不会对页面有其它影响。一般来说不会有影响,可以放心的加上。因为当float时,display会自动设置为block的,而不管原先的设置,display:none除外。
- 转载请注明来源:IT学习网 网址:http://www.t086.com/ 向您的朋友推荐此文章
- 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。