表象问题:同一个HTML页面,在不同浏览器上的显示效果不一样。
问题分析:由于浏览器的内核不一样,每个浏览器对标签的解释都有自己的规则,因而会造成显示效果不一样,称之为浏览器不兼容。对浏览器兼容问题,一般分,HTML,Javascript兼容,CSS兼容。 其中html相关问题比较容易处理,无非是高版本浏览器用了低版本浏览器无法识别的元素,导致其不能解析,所以平时注意一点就是。
1、浏览器了解
现在国内常见的浏览器有:IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。但目前最为主流浏览器有五大款,分别是ie,Edge浏览器(属于微软),火狐,谷歌(chrome)、Safari和Opera五大浏览器。
- Trident内核:IE浏览器、360浏览器、猎豹浏览器、百度浏览器。
- Gecko内核:火狐,这个浏览器内核是开源的浏览器内核,插件非常多。缺点:打开速度慢(加载flash插件)。
- Presto内核:Opera7及以上版本
- Webkit:遨游,苹果 ,symbian,Safari,Chrome
- Bink:Chrome(28及往后版本),Opera(15及往后版本)和Yandex浏览器,大部分国产浏览器最新版本都采用Blink。
参考资料:百度流量研究院的统计 “浏览器市场份额” :http://tongji.baidu.com/data/browser
2、浏览器不兼容的解决办法
网页的浏览器不兼容,主要会出现以下几方面:
2.1 不同浏览器对margin和padding的解析不一样
- 问题表现:不加样式控制下,margin和padding差异较大
- 碰到频率:100%
- 解决方案:添加CSS样式 * {margin:0; padding:0;}
- * 表示通配符选择器,用来匹配html页面上所有元素。
- 对于body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin 或padding值的,加上 * {margin:0; padding:0;} 样式就可以删除浏览器这些默认值,方面后面的设置。
- 这是最常见也是最易解决的一个兼容问题,几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0。
举例:写一个div盒子,只设置高度和背景颜色,观察在浏览器中的样式,会发现盒子默认有margin属性。使用 * {margin:0; padding:0;} 后,清除默认属性。
2.2 块属性标签float后,在IE6内核浏览器,横向margin比设置的值大
- 问题症状:常见症状块级元素同时设置float和横向margin属性时,在ie6中横向外边距比设置的值大,因而部分内容被挤到下一行。
- 具体原因:ie6的横向margin双倍bug
- 碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
- 解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
- 备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
- 注意:现在使用IE6的情况较少,很多公司在做网站时,已经不再考虑IE6的兼容性问题。
2.3 当设置较小高度标签(一般小于10px)时,在ie6,ie7,遨游中高度超出自己设置高度
- 问题症状:ie6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
- 具体原因:ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。
- 碰到频率:60%
- 解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
- 备注:这种情况一般出现在我们设置小圆角背景的标签里。
3、padding,marign,height,width的傻瓜式解决技巧
注意是技巧,不是方法:
写好标准头
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
- 高尽量用padding,慎用margin。(上下两个盒子都有垂直方向margin时,实际外边距是较大的margin值)
- height尽量补上100%,父级height有定值子级height不用100%。
- 子级全为浮动时底部补个空clear:both的div。(清除浮动塌陷)
- 宽尽量用margin,慎用padding。(左右两个盒子都有水平方向margin时,实际外边距是两个margin值之和)
- width要精确计算,记得要减去padding、border、margin。
html页面的不兼容,主要有两个方面:浏览器不兼容、电脑分辨率不兼容。
推荐阅读:
同一个HTML页面,在不同电脑上的显示效果不一样!解决HTML页面的浏览器分辨率问题
========================这里是结束分割线====================