css兼容性

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在解决兼容性问题前应该要知道什么标签属性引起什么问题，方可对症下药。所谓的知其然还要知其所以然，问题就会迎刃而解、事半功倍。

浏览器兼容问题的起因及解决办法

一：不同浏览器的标签默认的外补丁和内补丁不同（各自的margin 和padding差异较大）。

       解决方案： CSS里    *{margin:0;padding:0;}

 二：鼠标手势问题

       解决方案：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer

三：IE6下两个层中间有空隙 

        解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;

四：IE6下图片下方会有空隙解决办法

        解决方法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom

五： IE和FireFox对空格的尺寸解释不同

        解决方法：FireFox为4px,IE中为8px

六：FireFox无法解析简写的padding属性设置

        解决方法：如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px

七：.FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行

八：.对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。即

<style type=”text/css”>

<!–

a:link {}

a:visited {}

a:hover {}

a:active {}

–>

</style>

这样可以避免一些访问过后的超链接就不具备hover和active样式了

九：IE6由于默认行高问题无法定义1px左右高度的容器

        解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px

十：外边距叠加问题：

        解决方法：由于块级子元素高度计算方式造成的。若是元素没有垂直边框或者padding，那么它的高度就是包含的子元素的顶部和底部边框                            的的距离。