前端开发中各浏览器兼容性问题汇总——不间断更新

一、css部分

        Q：ie7下z-index属性的有时候达不到理想效果的问题

        A：ie7下子元素的z-index属性会被定位了的父元素影响而重置，所以ie7下若发现某一个元素z-index设置无效，尝试去找它定位了的（relative或者absolute）父元素，并同时也设置该父元素的z-index为相应值。

        Q：claer:left后，设置margin-top没有效果

        A：这种情况跟clear的实现原理有关，clear:left元素会被强制添加上一个最小外边距，使得它刚好能够处在之前浮动元素的下方。然而ie6、ie7处理这个强制的上外边距的时候与ff，chrome，ie8、9等浏览器不一样。当给清除浮动元素添加margin-top属性的时候，ie6、7是将它与强制添加的边距相加，所以是有效果的，但是其他的浏览器则因为设置的margin-top值小于强制添加的最小外边距值，所以直接被忽略， 不起作用，只有当设置的值大于这个强制值时，才开始起作用。

               有几种方式可以解决这个兼容性问题：1、将上一行的浮动元素包围在一个div里面，div进行clearfix闭合浮动处理。2、在浮动元素与需清除浮动元素之间插入一个<div style="clear:both"></div>，那么那个需要清除浮动的元素也就不需要设置clear了。（这两种方式都增加了额外的无意义div标签，不推荐。）

               3、让清除浮动的元素也浮动起来。这种做法其实没有解决根本问题，它清除了浮动但是又添加了新的浮动。

               4、我自己用的方法，不知道有没有后遗症。那就是干脆不用margin-top，改用margin-bottom，将边距的任务转交给上一行的浮动元素。（考虑到垂直外边距的叠加问题，一般我做的时候都是统一用margin-top来实现垂直外边距的，margin-bottom也就是在这种特殊情况下使用。）