CSS样式浏览器兼容性问题归纳

什么是浏览器兼容性问题

浏览器兼容性问题：是指因为不同的浏览器基于不同的内核对同一段代码有不同的解析，造成页面显示效果不统一的情况。

目前测试常用的几大浏览器

1.IE tester IE浏览器 （综合了IE的大部分版本）

2.Chorme 谷歌浏览器 （最常用）

3.Firefox 火狐浏览器 （以前常用）

4.Safari 苹果公司浏览器 （苹果MacOSX平台的多标签的网络浏览器）

5.Opera 欧朋浏览器 （全球第一手机浏览器Opera的中文品牌产品）

CSS常见兼容性问题及解决方案：

1. 上下margin重合问题：

问题描述：相邻的margin-left和margin-right是不会重合的，但是相邻的块级元素margin-top 和margin-bottom会产生重合。

解决方案：统一设置margin-top或者 Marin-bottom，不要混合使用。

2.超链接访问后，hover样式不显示：

问题描述：同时设置a:visited和a:hover样式后，超链接访问后，hover的样式不显示，

问题原因：标签中的样式顺序出现了错误。

解决方案：将他们的样式排序为 a:link , a:visited , a:hover , a:active .

3.行内元素上下margin及padding不拉开元素间距的问题：

问题描述：行内元素的margin和padding属性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

解决方案：将行内元素display设置为block即可解决

4.不同浏览器的标签默认的外间距和内间距不同

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

解决方案：在CSS文件开头用通配符*来设置各个标签的内外边距是0。

*

{

margin: 0px;

padding:0px;

}

5.ul在浏览器中不同表现，具有默认边距在不同浏览器中显示的位置不同：

问题描述：在IE中，ul的默认边距是margin，在Firefox中，ul的默认边距是padding。

解决方案：设置其属性 padding：0px ; Margin : 0px;

6.按钮默认大小不一：

问题描述：不同浏览器的默认按钮大小可能不同。

解决方案：用a标签来模拟按钮，添加样式；如果按钮是一张背景图片，那么直接给按钮添加背景图；

7.图片间默认又间距问题：

问题描述：几个img标签（行内标签）放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

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

8.双倍浮动问题：

问题描述：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大。

解决方案：给float标签添加display：inline，将其转换为行内元素

9.设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度

问题描述：IE8之前的浏览器都会给标签一个最小默认的行高的高度，一般会出现在设置小圆角背景标签里。

解决方案：给容器添加overflow：hidden；或者设置行高line-height 小于你设置的高度。

10.容器不扩展问题：

问题描述：div嵌套结构中，外层的高度并没有随着子容器的高度自动扩展，却是形成了一条线。

问题原因：因为当子容器成为浮动元素后，并脱离了文档流，父容器认为自己内容为空而导致的。

解决问题：在容器的末尾加入个清理浮动的div。 在网页中的任何地方，当遇到容器不扩展时，只需加入以下代码段，便能修复问题。