T086学习网 | 站长学院 | 技术文档 | 成语 | 歇后语 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论 | 欣欣百宝箱

IE BUG,margin 两倍

【 网络作者:佚名 更新时间:2008-04-11 | 字体:
[导读]<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/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。
更多
留言建议ASP探针PHP探针站长Enjoy的Blog
© 2017 T086学习网 - T086.com(原itlearner.com)
RunTime:9.54ms QueryTime:7