HTML+CSS项目实践七：同一个HTML页面，在不同浏览器上的显示效果不一样！解决HTML页面的浏览器兼容问题

表象问题：同一个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的傻瓜式解决技巧
 

注意是技巧，不是方法：

写好标准头

   

   

• 高尽量用padding，慎用margin。（上下两个盒子都有垂直方向margin时，实际外边距是较大的margin值）
• height尽量补上100%，父级height有定值子级height不用100%。
• 子级全为浮动时底部补个空clear:both的div。（清除浮动塌陷）
• 宽尽量用margin，慎用padding。（左右两个盒子都有水平方向margin时，实际外边距是两个margin值之和）
• width要精确计算，记得要减去padding、border、margin。

 

 

html页面的不兼容，主要有两个方面：浏览器不兼容、电脑分辨率不兼容。

推荐阅读：

同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面的浏览器分辨率问题

 

========================这里是结束分割线====================