解决IE7浏览器下margin或padding失效的问题

首先声明这里讨论的所有问题都是在浮动清除干净后产生的

在IE7浏览器下，margin或padding可能会出现失效的问题，尤其是外部两个div的margin-bottom或者padding-bottom

margin可能会出现完全失效，padding则可能出现给出值但实际距离缩小的情况

这里举两个例子

1.先来看看原本想要的效果

但实际在IE7下会出现的效果

1）margin-bottom失效

2）padding-bottom缩短

2.出现原因

在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容

　　上面的例子没有触发  haslayout 他不能对自己和可能的子孙元素进行尺寸计算和定位；所以子元素的margin失效。

       这里大家想了解更多可以去百度，我只是粗略地说明一下下。

　　没有触发当然就要激活咯，激活 haslayout 的方式有很多 。

3.解决方案

1）zoom:1;

2）设置 widht或height。设置了 这两个值。子元素定位也正确了。

width一般下width：100%就可以了

height呢个人不建议使用 还是让盒子里面的内容自动撑开比较好

3）设置外部div里面子元素的padding或者margin

这种方式只针对子元素较少的情况，不然如果出现多个子元素，岂不是每个都要设置太麻烦

4.补充

在浮动比较多的页面，清除了浮动后，如果外部div未设置width:100%;模块可能会出现滑动的情况

看个例子：不仅margin-bottom失效，而且分页的部分还出现了滑动的情况。

底部的外部div设置了width：100%后，恢复正常，看看页面

 

文章只是针对css新手，不足之处，请多多指正。