掌心

恰好昨天有个同事问了我一个问题：

IE、Chrome、Firefox 这些浏览器之间，你们在开发的时候，会出现有不同的代码处理么？
IE6/7/8 差别到底在哪里，是什么代码的编写会导致存在差异？
兼容测试真的要一个浏览器一个浏览器的看吗，能划掉一些么？
页面生成的时候，是不是不同浏览器就会生成不同的源代码？

我觉得对这些解答很有必要，如今在推「Kill IE6/7」，是时候就浏览器显示网页的兼容性做下总结（CSS相关）。

前端眼里的浏览器

作为前端，一个主要的工作就是网页制作。制作页面的同一份源码，会因不同的渲染引擎和 JS 引擎的不同而展示出不一样的页面。

这么多浏览器，没有一个标准么？其实，如今的高级浏览器都要遵循 W3C 标准，但是低级浏览器还有着自己的一套规则。这也是页面渲染出来，呈现在用户面前不一样的一个原因。

IE6 一直是前端开发人员的噩梦，为什么呢？

• PNG 是一种支持半透明通道的图片，但是 IE6 并不支持。IE6 下看 PNG8，就会出现「青绿色」的背景。
• IE6 有自己的一套 CSS 标准，前端必须写更多的代码去照顾它。
• IE6 对于页面默认控件的处理与众不同，例如 radio 或者 select 等，都无法通过样式来自定义。

再多宗罪定给 IE6 都不足多，IE系列的基本无例外。而主流的浏览器之间也有区别，主要体现在 CSS3 的支持上。

在前端的眼里，为了保持同一份视觉稿能够在不同浏览器里看起来基本一致，就需要写很多的兼容性代码。

样式的兼容性处理方法

做兼容性代码，其实就是前端常做的CSS Hack写法。而这样的写法，主要遵循着「兼容性」和「顺序」的原则。就是利用书写顺序和不同浏览器对一些特定书写方法的解析方式不同而达到不同的效果。

简单举个通过 CSS 属性来处理兼容性的例子：

/**
 * 1. 保证在用户面前不同的浏览器内边距在 10px 。
 * 2. 由于 IE6、7 下会存在双倍边距的 Bug，所以书写的值在一半左右。
 * 3. 书写顺序也是需要遵循的，IE6 就会读到最后一句。
 */
.box {
    padding:10px;
    padding:8px\0;  /* ie8-9  */
    +padding:7px;   /* ie7    */
    _padding:6px;   /* ie6    */
}

有些时候，由于 CSS 中存在浮动定位、遮盖层级等原因，就会出现同一段代码在不同浏览器下显示不一致。那么就需要通过如上的CSS Hack来避免。

而对于高级浏览器，在 CSS3 的支持上也有不同，如下：

/**
 * 圆角边框
 */
.box {
    -webkit-border-radius: 5px; /* Chrome、Webkit */
    -moz-border-radius: 5px;    /* Firefox        */
    -ms-border-radius: 5px;     /* IE10           */
    -o-border-radius: 5px;      /* Opera          */
    border-radius: 5px;         /* W3C            */
}

在页面渲染的时候，需要的就是这一份代码，而不同的浏览器对它的解读不同，只把自身能识别的代码取去用。

如何做好兼容性测试

对于这种页面的测试，现状没有更好的解决方案。一般我是很苦逼地打开每一个操作系统，对不同的浏览器进行测试。

对于 Opera，使用的用户基本很少，不在测试的范围内。

除了看页面之外，由于浏览器的 JS 引擎不同，有 Javascript 交互的地方，也需要做好兼容性解决方案和测试。