网页兼容性测试（工具使用IETESTER、Firefox、360安全浏览器）

网页兼容性测试主要是针对不同的浏览器进行的测试。由于用户浏览器的不同，往往都会使我们的网页发生页面样式错乱，图片无法显示等问题。对于前端开发工程师来说，确保代码在各种主流浏览器的各个版本中都能正常显示,因此要对编写出来的网页进行兼容性测试

1. 点击【IETester】图标打开一个窗口，这个窗口跟浏览器类似。创建的浏览器页面默认展示的是IETester Home主页

    

2. 在窗口的正上方，有一排写着“5、6、7、8、9”的黄色小方框，每个数字小方框对应的是不同的IE版本，鼠标移动上去就会有提示信息，提示这是IE几的环境

    

3. 如点击IE6窗口就创建了一个IE6的浏览器标签，创建完成后就可以在输入框中输入要测试的网址，查看网址的显示是否正常。

    

4. 虽然只是一款兼容性的测试工具，但是工具也包含了对IE浏览器属性的修改，在窗口顶部下方的导航tag下方选择【选项】点击，然后点击【Internet熟悉】就可以进行设置

    

5. 在测试时缓存是一个很大的敌人，因为可能在未清除缓存的情况下，访问的不是最新的数据，这对测试结果造成了不确定性，所以在输入网之前要将缓存禁用了，禁用办法就是点击导航tag下方的【开发人员工具】找到【禁用缓存】点击它会高亮，这样就没有缓存的困扰了。

    

6. 在浏览器的右侧底部【配色方案】点击下拉可以选择自己喜欢的浏览器颜色。

   二、接着是360浏览器,如果显示有差异,可以在页面上,右键单击--单击"查看源代码",可以了解代码运行的情况,如果觉得看得代码不够直观,可以使用Firefox 浏览器中Firebug工具

1. 三、打 开Firefox 浏览器查看网页显示效果,同时我们也可以查看各个界面加载的代码是什么.单击,上方的"工具"--web开发者--Firebug--打开 Firebug.如果没有这个工具,去百度搜索下载这个组件,然后在Firefox 浏览器中工具--附加组件中添加

2.  

3. 打开Firebug后,在浏览器的下方,网站运行的代码.

    

4. 鼠标经过相应代码上方时,该代码运行显示的效果上面显示是灰色,因此我们可以轻松地去确定显示有差异的效果的代码是什么,Firebug支持临时修改运行的代码,临时改变显示效果,我们根据效果再去修改文件的源代码.

    

5. 其它浏览器的测试,我们可以参考CNZZ的统计数据与百度流量研究院的国内主流浏览器市场份额排行榜,去考虑选择哪些主流浏览器进行测试进而减少工作量.如下方2013年CNZZ的统计数据与百度流量研究院的统计数据