减少浏览器兼容性问题

做为一个前端工程师，不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。

　　确定运行环境

　　在开发前，我们要确定页面的运行环境：要兼容哪些浏览器，以及哪些屏幕分辨率。

　　如果我们不了解我们的运行环境，兼容性也无从谈起。也只有在确定来运行环境后，我们才可以选择合适的方式。我们可以借助 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 属性记得要加浏览器前缀

　　有时页面的元素改变后，应该被重绘，但浏览器没有重绘，可以用让元素隐藏，然后再显示的方式来让浏览器重绘

减少浏览器兼容性问题相关推荐

web浏览器_你最常用的web测试-浏览器兼容性测试
如今,市面上的浏览器种类越来越多(尤其是在平板和移动设备上),这就意味着你所测试的站点需要在这些你声称支持浏览器上都能很好的工作. 同时,主流浏览器(IE,Firefox,Chrome,Opera,S ...
如何做浏览器兼容性测试？教你几招
如今,市面上的浏览器种类越来越多(尤其是在平板和移动设备上),这意味着你所测试的站点需要在这些你声称支持浏览器上都能很好的工作. 同时,主流浏览器(IE,Firefox,Chrome,Opera,Sa ...
web测试必备技能：浏览器兼容性测试
如今,市面上的浏览器种类越来越多(尤其是在平板和移动设备上),这就意味着你所测试的站点需要在这些你声称支持浏览器上都能很好的工作. 同时,主流浏览器(IE,Firefox,Chrome,Opera,S ...
浏览器兼容性测试应该如何做？
如今,市面上的浏览器种类越来越多(尤其是在平板和移动设备上),这就意味着你所测试的站点需要在这些你声称支持浏览器上都能很好的工作. 同时,主流浏览器(IE,Firefox,Chrome,Opera,S ...
CSS_文字与特殊符号浏览器兼容性
2019独角兽企业重金招聘Python工程师标准>>> 页面布局里总是会有类似 "文字 | 文字" 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下 ...
css工程化和浏览器兼容性问题
CSS工程化 CSS编译器 CSS编译器,也叫做CSS预编译器,是指开发者使用某种类似CSS(但实际不是)的语言编写代码,然后通过编译器,将其编译成浏览器真正能执行的CSS代码. 目前常见的CSS编 ...
最全整理浏览器兼容性问题与解决方案（转）
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
第十二期:七种优秀的浏览器兼容性测试工具
本文向您介绍目前最为流行的.面向开发人员的七大浏览器兼容性测试工具. 作者:陈峻在许多谈及网站或Web应用开发的场合,开发人员最为关心的莫过于跨浏览器的兼容性问题.如您所知,诸如:计划.设计.测试等 ...
CSS浏览器兼容性与解决方法
一.什么是浏览器兼容性问题? 所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况:而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的. 认识浏览器内核 ...

减少浏览器兼容性问题

减少浏览器兼容性问题相关推荐

最新文章

热门文章