一、什么是浏览器兼容性
浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。
浏览器兼容问题包括HTML标签兼容、css兼容和JS兼容
二、HTML标签兼容
1、 问题：对于H5新增的标签和表单类型，pc低版本的浏览器不兼容
解决办法：pc端布局尽量不要使用新增标签
2、 问题：H5新增的多媒体标签兼容问题
解决办法： 一般提供ogg和mp3格式，就可以支持所有主流浏览器了
二、css兼容
1、 IE6默认高度，当元素高于18px，无法正常显示正确高度
解决办法：设置 font-size：0；或 overflow：hidden；
2、双倍浮向：IE6浮动时横向margin加倍
产生因素：块属性、float、有横向margin。
解决方法：display：inline
3、 在各个浏览器下img有空隙
原因是：回车。
解决方法: 让图片浮动 或者 display：block
4、表单元素在各浏览器中 行高不一致、对齐方式不一致
解决办法：给表单元素添加 float
5、按钮默认样式不一致
解决办法：统一样式
6、透明
filter：alpha（opacity=80）；/*ie支持该属性*/
opacity：0.8；/*支持css3的浏览器*/
7、li中有a且a的display：block或 float 时，行高会不一致
解决办法：给a设为display：inline/inline-block 或者 给 li 添加浮动并设置宽
8、IE6中 li 有浮动，li中有a，a有样式display：block且有高度时，li 会独占一行呈阶梯状展示
解决办法：不给a设置高度 或 给a添加浮动
9、父元素中有块元素，给子元素添加margin-top时，父元素也掉下来
解决办法：给父元素添加样式：overflow：hidden 或 加边框；或给子元素添加浮动
10、火狐不识别background-position-y 或background-position-x;
11、两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值。
12、优先级：被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中，!important不起作用。
13、li之间有间距
解决方法：li 设置vertical-align:middle;
14、3像素问题：ie6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题。
解决方法：用hack技术， 例如：所有浏览器通用 height:100px;
ie6专用_height:100px;
ie7专用*+height:100px;
ie6/ie7共用*height:100px;
10、过滤器：
* ， ie6,ie7可以识别；
_和- ， ie6可以识别；
!important ,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；
-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法
三、JS兼容
1、const 问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法：统一使用var关键字来定义常量.
2、 event.srcElement问题
问题说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj =event.srcElement ?event.srcElement : event.target;
3、事件绑定
IE：dom.attachEvent();
其他浏览器：dom.addEventListener()；
4、操作 tr 对象
在ie9以下，不能操作tr的innerHTML
5、FireFox中类似obj.style.height =imgObj.height的语句无效。
6、event.x与event.y问题
说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
7、window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法：使用window.location来代替window.location.href.
8、ajax请求的问题
IE:ActiveXObject
其他：xmlHttpReuest