一,从根源上讲
各个浏览器之所以存在兼容性的问题,究其原因是不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。内核是浏览器底层架构最核心和基础的部分,按照功能可分为:渲染引擎和JS引擎。渲染引擎(Rendering Engine)也称为布局引擎(Layout Engine)、排版引擎,负责对网页语法的解释和渲染显示到浏览器。一个渲染引擎通常包括HTML解释器、CSS解释器、布局layout、网络等模块:
通常讲的浏览器内核就是指代的浏览器的渲染引擎。不同的浏览器使用不同的渲染内核,对HTML/JS/CSS的标准语法的解释也存在差异,导致在显示效果、语法支持度和渲染效率上也存在差别,所以也就导致了网页程序在不同内核的浏览器下的表现和渲染差异,乃至bug都不统一。
二,常见的HTML和CSS中的兼容性问题
1.双边距BUG float引起的 使用display
浮动元素的双倍Margin的Bug是IE6以及其以下版本的一个经典Bug了,触发这个Bug的产生是给元素设置了float并且同时和float同一方向设置了margin值,此时在IE6(IE6以下版本我们飘过不理了)就会产一个双倍margin值的Bug。
修复这个Bug的方法很简单,只需要改变浮动元素的显示风格,也就是说在浮动元素中增加一个“display:inline”属性,这样就可以轻松的解决“浮动元素的双倍Margin”的Bug。
2.hover失效
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
3.图片间隙
div中的图片间隙(该bug出现在IE6及更低版本中)
描述:在div中插入图片时,图片会将div下方撑大三像素。
hack1:将<div>与<img>写在一行上;
hack2:将<img>转为块状元素,给<img>添加声明:display:block;
4.透明属性
IE浏览器写法:filter:alpha(opacity=value);取值范围1--100
兼容其他浏览器写法:opacity:.value;(value的取值范围0-9)
5:min-height在IE6下不兼容
解决方案:
1)min-height:value;
_height:value;
2)min-height:value;
height:auto!important;
height:value;
6:按钮默认大小不一
解决方案:
1)用a标签来模拟按钮,添加样式;
2)如果按钮是一张背景图片,那么直接给按钮添加背景图;
7:上下margin的重叠问题
描述:给上边元素设置了margin-bottom,给下边元素设置了margin-top,浏览器只会识别较大值;
解决方案:margin-top和margin-bottom中选择一个,只设置其中一个值;
8:hack
Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,因为它们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
在属性前可加以上这三个符号
_ 只有IE6以下及IE6支持,例如_height:100px;
* 只有IE7以下及IE7支持,例如*height:100px;
*+只有IE7以下及IE7支持,例如*+height:100px;
针对IE8以及以上加属性值后缀\0(数字零),例如:height:200px\0;
9:Filter
表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。
三 常见的JavaScript的兼容性问题
1.标准的事件绑定方法函数为addEventListener,但IE下是attachEvent;
2.事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准
3.window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement
4.ajax的实现方式不同,这个我所理解的是获取XMLHttpRequest的不同,IE下是activeXObject
5.获得DOM节点的父节点、子节点的方式不同
其他浏览器:parentNode parentNode.childNodes
IE:parentElement parentElement.children
网友评论