一，从根源上讲
各个浏览器之所以存在兼容性的问题，究其原因是不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。内核是浏览器底层架构最核心和基础的部分，按照功能可分为：渲染引擎和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
网友评论