浏览器兼容性测试问题

1.产生原因 

• 不同浏览器使用内核及所支持的HTML等网页语言标准不同
• 用户客户端的环境不同（如分辨率不同）

2.问题表现

• 最常见的问题就是网页元素位置混乱，错位。

3.解决方案

• 不断的在各浏览器间调试网页显示效果

通过对css样式控制以及通过脚本判断并赋予不同浏览器的解析标准。

• 在开发过程中使用当前比较流行的JS，CSS框架框架

如jQuery，YUI等等，因为这些框架无论是底层的还是应用层的一般都已经做好了浏览器兼容

• CSS提供了很多hack接口可供使用

hack既可以实现跨浏览器的兼容，也可以实现同一浏览器不同版本的兼容。

4.兼容性测试方法

• 以浏览器的兼容测试为主
• 平台、分辨率为辅

浏览器测试

     测试浏览器兼容性的一个方法是创建一个兼容性矩阵。在这个矩阵中，测试浏览器对某些构件和设置的适应性。

     测试点：

•  一般的浏览器兼容测试（一般测试前几，按自己需求）

      以下介绍一些平时的经验

      IE浏览器：一般使用它的文档模式（F12）切换，来测试IE8~11的兼容。一般问题主要是IE8及IE9会对一些JS、控件等有兼容问题。

      360浏览器：主要问题出在360（兼容）模式，有可能出现少了某个标签导致整个界面不加载的情况（但IE浏览器器显示又正常）。

      火狐浏览器、chrome浏览器：有的前端使用chrome开发，有的使用火狐，有时候2个中一个也会出现不兼容，尤其是网站常用到的滚动、计时等功能。

      QQ浏览器、搜狗浏览器：前面那个也容易出错，后面搜狗一般还好。

• 浏览器拦截功能

        web网站，经常会投放一些自己的广告，或者会有一些弹窗，或者引导页等等。浏览器自带的拦截功能或者用户常用到的拦截插件也会是我们测试的一部分。

当然，这个一个系统测试一遍后基本就不会再动了。这里只是总结一下。       

         测试插件：adblock plus及adblock

 

         测试的浏览器：IE8~11、360（ 开启自带广告过滤）、QQ（开启自带广告过滤）、搜狗（开启自带广告过滤）、UC（开启自带广告过滤）、chrome、firefox

 

浏览器	内核	平台	备注
IE	IE（Trident内核）	windows
Chrome	Blink内核	跨平台	追求更快
FireFox	Gecko	跨平台	追求扩展
360	IE
QQ	IE\Blink内核
Safari	Webkit内核	Mac