[TOC] ## 前言 前端面试中一般都会谈到兼容问题，也希望你能讲出一些常见的兼容问题以及解决方案。在你的日常工作中，你可能是谷歌浏览器开发好，然后各个浏览器分别查看，具体修复或者等测试反馈具体问题。而比较厉害的前端会在问题出现之前用一些常见的hack代码来提前避免这些可能出现的问题。 那么怎么操作才是更好的方式？才能够提高我们的工作效率？你不妨按照下面的思路去想一下 ## 兼容问题的产生 想要解决这个问题，必须先分析兼容问题产生的原因。 * 代码基本不考虑兼容或者无从下手，不知道哪些有兼容问题，更不知道即使有问题，这些部分该如何处理。 * 对各个浏览器的市场占比不清楚，对内核不清楚，浏览器对页面的解析、渲染不清楚，不知道自己的重点工作，用户需求是什么。 * 对兼容问题没有系统的认识，无法对兼容出现的问题进行科学的分类 * 测试修复阶段，没有自己的思想，听测试反馈，能改的都要改过来，不能改的就说改不了。 ## 用户体验整体验收标准 1. 无论在任何阶段，都要在项目开发之前确认用户群体以及最终的浏览器版本，包括最终的分辨率，了解清楚之后确认最终可接受的适配范围，适配周期，无特殊情况按照公司的适配标准文档出发。 2. 这个阶段确定好之后，就可以有目的性的进行开发，避免不必要的兼容处理以及代码分析。如果是谷歌等现代浏览器就可以大胆使用新css样式以及酷炫的各种效果和插件，如果是ie等低版本，就要考虑基本功能可以实现的前提下，谨慎引入其他，确定可以实现的前提下再开发。 ## 对浏览器的认知 浏览器的市场占比，前端的趋势是适配哪些浏览器，哪些分辨率，各个浏览器的内核是什么？浏览器的兼容问题分类如下： * 对基本样式的解释不同，解决办法：标准文档声明，代码规范，文档渲染模式，样式重置，针对当前浏览器版本写hack,js脚本处理 * 对新样式，新标签不支持，解决办法：兼容文件，厂商前缀脚本，替代效果 * 插件，复杂效果支持：查看不支持的具体原因，如能解决再使用，不能解决换能兼容的插件，或者放弃效果，用友好提示文本让用户换高级浏览器。 * 浏览器解析：分为渲染引擎和行为引擎，渲染引擎分为重绘和重排，页面加载为同步队列过程。而行为引擎集中在js处理上，建议使用高版本的jq，尤其部分方法，如果不支持用jq的工具方法尝试，部分原声的语法不支持的尝试用新版的jq，目前统一用1.11.1。其中对页面解析中，部分标签现代浏览器会帮你把标签补全，而低版本的ie是识别为错误的，导致样式错误。另外，对于低版本的标签和样式要知道最终的解读结果是什么。 ## 代码兼容 代码做兼容，如上所述，在出现兼容问题之前，最好将兼容问题汇总，代码中就解决这些问题。这里只对hack类的兼容代码作分析。 * hack类的分为两种： 1.针对浏览器版本做样式修订； 2.针对新样式或者新标签做修订； ## 兼容思想--开发思想 1. 优雅降级 以高版本浏览器为基准，实现全部的效果，保证低版本浏览器基本功能可用。现代网站为主，用户对ui以及功能要求较高，可忽略低版本的浏览器。 2. 渐进增强 以低版本浏览器为基准，保证全部效果可用，在高版本浏览器有更好的体验。 常规网站为主，基本页面为主，且用户对这部分要求不高。 ## 兼容问题分类 详见兼容问题分类文档 ## 兼容解决方案 友情链接： * [w3help常见兼容汇总](http://www.w3help.org/zh-cn/kb/) * [csdn跨浏览器知识库](http://subject.csdn.net/w3help/)