使用quirksmode来简化开发

看到标题也许有些人要疯了，都什么年代了还用quirksmode？本来我也是持有这种想法的，不过在工作中真正使用过一次之后，感觉还是很不错。

 

首先说一下背景。现在又是一个浏览器大战的时代，ie6,7,8,9  Firefox 3.6,4  Chrome , Opera 10,11，还有好多好多不知名的小牌浏览器，历史上从来没有如此丰富过。丰富的浏览器促进了行业的发展，但同时也为前端开发带来巨大的挑战，我们的产出必须要经过大部分浏览器的测试。万幸的是，除ie以外的浏览器，基本上渲染上大同小异，可以合并为一个调试。问题就在于ie，现在的发行版本6,7,8,9，可能存在每个浏览器都渲染的不一样的情况。特别是对于一些要求精细的应用，各种几像素的偏差往往很伤脑筋。 

 

这个时候，也许考虑一下quirksmode，一切又会不一样。在quirksmode下，所有大于5.5版本的ie浏览器，都会降级到5.5版本，以5.5的渲染方式去渲染页面。也就是会出现怪异的盒模型等等问题。但是，其实换个角度想想，所有ie的平台又统一了。我们现在只需要编写两套样式，一套给在quirksmode下的ie，一套给标准浏览器，就万事大吉。

 

更进一步，我们会发现css中有这么一个属性——box-sizing。它有两个取值，border-box & content-box。如果给设置为border-box，则会按照怪异模式盒模型去渲染，content-box则是w3c的盒模型。 其实对于怪异模式和标准模式，一个很大的区别就是盒模型上的解析不同。给所有元素设置一个box-sizing:border-box，把标准盒模型切换到了怪异盒模型上，也相当于我们把刚才的两套模式相互拉近了一大步。

 

实际操作中，对于复杂精细的应用，这样会节省大量的调试时间。特别是现在比较有用的选择器、各种特效，都是基本不支持ie6的。各种ie5.5的渲染bug，我们在ie6也几乎都会遇到。在ie6还不能放弃的现在，我们本来写的也是一套很古老的、充满各种bug fix的css文件，何不更古老一点，换回的是兼容性更强、hack更少的代码，还是有很强的可操作性的。 

 

关于quirksmode的具体描述，可以参见ppk的文章：http://www.quirksmode.org/css/quirksmode.html 

box-sizing 参见： http://www.quirksmode.org/css/box.html