看到标题也许有些人要疯了,都什么年代了还用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