常见浏览器的兼容性问题

对浏览器兼容问题，一般分为html、css兼容、javascript兼容。

1. 不同浏览器的标签默认的外补丁和内补丁不同；

             问题：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异大。

             解决方法：css里加*{margin：0；padding：0；}

        2. 块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大;

             问题：常见症状是ie6中后面的一块被顶到下一行。

             解决方法：在float的标签样式控制中加入 display:inline;将其转化为行内属性。

        3. 设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度；

             解决方法：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

        4. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug

             问题：ie6里的间距比超过设置的间距

             解决方法：在display:block;后面加入display:inline;display:table

        5. 图片默认有间距

            解决方法：使用float属性为img布局

        6. 标签最低高度设置min-height不兼容

            min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容

            解决方法：如果设置一个标签的最小高度200px，需要设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

         7.IE6,7下z-index和position存在兼容问题，（如在IE6,7下的下拉菜单无法正常下拉）

            解决方法：给定位元素的父级，父级的父级……都加z-index值，数值要依次增大。

         8.IE6,7下设置盒子的margin-top值，会使得出现margin-bottom值。

            解决方法：给设置margin-top值得盒子加display：inline-block。

         9.ie6,7下设置了父级div的padding-top值，子级是有清浮动的元素。为什么父级的padding-top值会继承到子级？

            解决方法：

            a.给写有<div class="clear:both">的盒子加上 height:0;font-size:0;overflow:hidden.（在父级没有指定宽度的情况下）

            b.父级给定宽度。

         10.IE6下无法实现height:1px的高度问题？

            解决方法：

                    （1）多加font-size：0；

                    （2）多加line-height：1px；

                    （3）border边框。

         11.ie7下，margin会有莫名的原因不显示。

    　　解决方法：使这个块不直接跟在前面的这个绝对定位元素后面，比如在它们之间插入一个空div标签，或者交换这两个标签的前后位置.

         12.ie6下不支持png透明

         13.IE7下，只有一个浮动元素float：right，可以将它放在未浮动元素之前。就不会出现被挤到下一行的问题。