前端兼容性问题分类

前端兼容性问题分为三类：

• 浏览器兼容性
• 屏幕分辨率兼容性
• 跨平台兼容性

一、浏览器兼容性问题

所谓的浏览器兼容性问题，是指因为不同的浏览器使用了不同的内核，对同一段代码有不同的解析，造成页面显示效果不统一的情况。

一个浏览器兼容性查询网站：caniuse.com/， 这样可以快速的了解到代码在各个浏览器中的兼容情况。

解决浏览器兼容性问题，从三个方面入手：html部分、css部分、js部分。

1.html问题

问题	具体表现	解决办法
高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在html5的新标签上		htmlshim框架可以让低于IE9的浏览器支持html5
img的alt属性，在图片不存在的情况下，各浏览器的解析不一致	在chrome下显示的是一张破损的图片，在firefox下显示的是alt的文字，而在IE中显示的是破损的图片加文字
ul标签内外边距问题	ul标签在IE6IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距	统一设置ul的内外边距为0

2.css问题

问题	具体表现	解决办法
IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍		display:block;
IE6下图片的下方有空隙		给img设置display:block;
IE6下两个float之间会有个3px的bug		给右边的元素也设置float:left;
IE6下没有min-width的概念，其默认的width就是min-width
IE6下在使用margin:0 auto;无法使其居中		为其父容器设置text-align:center;
被点击过后的超链接不再具有hover和active属性		按lvha的顺序书写css样式
在使用绝对定位或者相对定位后，IE中设置z-index失效	原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序
IE6下无法设置1px的行高	是由其默认行高引起的	为其设置overflow:hidden;或者line-height:1px;

3.js问题

问题	具体表现	解决办法
事件绑定方法	标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；
事件的捕获方式不一致	标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准
事件处理时的event属性不同，并且获取目标元素的方法也不同，	event属性在标准浏览器是传入的，IE下由window.event获取的，获取目标元素的方法在标准浏览器是event.target，而IE下是event.srcElement
在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。	var year= new Date().getYear();
ajax的实现方式不同	基于IE内核的浏览器：var  Ajax对象 = new  ActiveXObject(‘Microsoft.XMLHTTP’); 基于W3C内核的浏览器：var  Ajax对象 = new  XMLHttpRequest();
IE中不能操作tr的innerHtml
获得DOM节点的父节点、子节点的方式不同	IE：parentElement parentElement.children； 其他浏览器：parentNode  parentNode.childNodes

下一步学习：

补充以上浏览器兼容问题的实践，继续学习屏幕分辨率兼容性问题和跨平台兼容性问题

参考资料：

tool.4xseo.com/a/3058.html www.cnblogs.com/windfic/p/1… tool.4xseo.com/a/3058.html zhuanlan.zhihu.com/p/552337557 www.sohu.com/a/525115490…