IE7下fload:left造成双倍边距BUG

双倍边距bug在IE6中经常出现,在IE7很少遇见

今天做一个活动页面的时候在IE7遇到了双倍边距困扰,倒弄好半天没找到原因,在大师指点下找到了原因:

正常效果图如下:

要实现4个图片摆放效果:

情况1、我把头像和兑换图片放到一个box里面

   box的css     .box{65px; height:80px;  float:left; margin:5px 20px 0px; }/*红色部分是造成bug的关键*/

 头像的css     .photo{ 50px; height:50px; background:url(images/photo.png) no-repeat; margin:0 auto; }

 兑换按钮css  .btn{ 64px; height:20px; background:url(images/btn.png) no-repeat; margin:5px 0; border:none; cursor:pointer; }

  这些css写出的效果在IE8和火狐能正常显示,但在IE7下效果就变成下面错位效果了

情况2、如果把box的css修改成下面情况(添加0px就可以解决IE7双倍边距的问题)

.box{65px; height:80px;  float:left; margin:5px 20px 0px  0px; }/*添加了0px*/

情况3、如果把box的css修改成下面情况((添加display:inline就可以解决IE7双倍边距的问题))

.box{65px; height:80px;  float:left; margin:5px 20px 0px ; display:inline;}/*添加了display:inline;*/

总结:

当我们需要让float和margin搭档的时候如果出现错位不能实现正常效果,请你把 display:inline 找来帮忙检查下看能否解决问题

再加点关于margin的话题

当遇到盒模型的时候,内部盒子如果有margin-left 属性,外部盒子有pandding-left属性的,这个时候会有属性冲突导致只有一个left属性有效果

建议在盒子嵌套时候避免内外盒子的margin和pandding同方向使用

原文地址:https://www.cnblogs.com/attesa/p/1773899.html