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文件开头用通配符*来设置各个标签的内外边距是。

*

{

margin: px;

padding:px;

}

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

问题表述：在IE中，ul的默认边距是margin，在Firefox中各种浏览器兼容问题，ul的默认边距是padding。

解决方案：增设其特性 padding：px ; Margin : px;

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。 在网站中的任何地方，当碰到容器不扩大时，只需加入以上代码段，便能修复问题。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-118628-1.html