浏览器种类

目前，前端需要专门测试的浏览器包括：

  • IE6
  • IE7
  • IE8
  • IE9+
  • chrome
  • firefox
  • opera
  • 360浏览器（on xp/windows7）

其中，IE6/IE7/360+xp作为低端浏览器，专门做兼容fix。
其他浏览器可以看作modern浏览器，兼容性问题相对较少。

开发过程

开发，从modern浏览器中的chrome作为标准，第一波测试在基于chrome/firefox/opera的开发中完成。
第二波测试IE9+，第三波测试IE8-。

在第一波过程中，修改完善css，html标签，初始开发保证标签css没有问题。
在后续测试中，通过hack的方法，加入补丁，将其他浏览器上的效果调整到modern浏览器的效果。

css hack及其他fix方法

这里整理下http://www.douban.com/note/163291324/ 的内容

IE8兼容问题

直接通过添加
<metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/>
将IE8的显示模式调解成IE7的，这样将IE8的兼容问题转化为IE7的兼容问题

IE6兼容问题

float浮动在IE6下双倍margin问题：
'_'只有IE6能够识别，比如：

_maring: 0;

Firefox问题

清除浮动
添加一个div，style为 clear:both;

其他辨识标签

更进一步，可以通过HTML判断浏览器，来编写针对特定浏览器的代码(from http://zxlyecf2.iteye.com/blog/2116974)：

  1. <!--[if !IE]><!-->除IE外都可识别<!--<![endif]-->
  2. <!--[if IE]> 所有的IE可识别<![endif]-->
  3. <!--[if IE 6]> 仅IE6可识别<![endif]-->
  4. <!--[if lt IE 6]> IE6以及IE6以下版本可识别<![endif]-->
  5. <!--[if gte IE 6]> IE6以及IE6以上版本可识别<![endif]-->
  6. <!--[if IE 7]> 仅IE7可识别<![endif]-->
  7. <!--[if lt IE 7]> IE7以及IE7以下版本可识别<![endif]-->
  8. <!--[if gte IE 7]> IE7以及IE7以上版本可识别<![endif]-->

测试工具

这里主要介绍 modern.IE ，这是微软出的前台测试的平台。
该平台可分为两个部分：一个是用于检测常见代码问题的Web扫描工具，另一个是与BrowserStack合作的虚拟测试服务。

其中，BrowerStack是一个云端的测试服务，可以提供所有系统和浏览器的组合。