双倍边距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同方向使用