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。 在网页中的任何地方,当遇到容器不扩展时,只需加入以下代码段,便能修复问题。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181006A1AZIQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券