减少浏览器兼容性问题
Posted 云效
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了减少浏览器兼容性问题相关的知识，希望对你有一定的参考价值。
做为一个前端工程师，不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。
确定运行环境
在开发前，我们要确定页面的运行环境：要兼容哪些浏览器，以及哪些屏幕分辨率。
如果我们不了解我们的运行环境，兼容性也无从谈起。也只有在确定来运行环境后，我们才可以选择合适的方式。我们可以借助 html5 与 CSS3 技术应用评估来选择用哪些技术。
查询特性的兼容性
在使用某个特性前，我们可以使用 Can I Use 来查询某特性在各个浏览器上的兼容性情况。也可以在代码中用 Modernizr 进行特性探测。
下面是一些查询兼容性的网站
es5规范浏览器兼容性表格
es6规范浏览器兼容性表格
html5 移动端兼容性速查
如果实在想用某个特性，但某个想兼容的浏览器不支持，可以找找有没库来做支持的
HTML5 Cross Browser Polyfills
HTML5 POLYFILLS
了解哪些写法会产生兼容性问题
有时候一些兼容性问题的产生并不是因为我们的写法问题，而是浏览器自身的 bug（如 IE 6 的双边距问题），或者浏览器对标准的支持不一致。所以我们要了解哪些写法会产生兼容性问题，然后避免那样写。
推荐认真研究浏览器兼容性-根本原因内容列表。
充分的测试
推荐使用 爱测试iTest平台。它是阿里巴巴研发的前端自动化测试工具，支持主流浏览器的JS错误检测，支持页面截图，一键验证，坏死链接检测等。
现在一些多浏览器自动化测试的工具，服务(如 Sauce LABS)也很多，暂时还没怎么研究，以后研究后可以给大家分享~
一些技巧
让用 IE 访问页面时，尽可能用最新的 IE 渲染引擎。通过加在 HTML 中加标签 <meta http-equiv="X-UA-Compatible" content="IE=edge">。
让双核浏览器（如 360，搜狗等国产浏览器）访问本网页时，用 webkit 内核来渲染。通过加在 HTML 中加标签 <meta name="renderer" content="webkit">。（注：目前只有 360 浏览器支持）
用 HTML5 的 DocType：<!DOCTYPE html PUBLIC>。避免使用有问题的 DocType 而导致的浏览器用怪癖模式来渲染页面。
一些 CSS 属性记得要加浏览器前缀
有时页面的元素改变后，应该被重绘，但浏览器没有重绘，可以用让元素隐藏，然后再显示的方式来让浏览器重绘
云效.阿里巴巴出品
面向企业级的研发提效平台
产品首页：yunxiao.aliyun.com
产品微博：云效平台_阿里||QQ交流群：101628314
以上是关于减少浏览器兼容性问题的主要内容，如果未能解决你的问题，请参考以下文章