zoukankan      html  css  js  c++  java
  • 使用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 

  • 相关阅读:
    洛谷 1339 最短路
    洛谷 1330 封锁阳光大学 图论 二分图染色
    洛谷 1262 间谍网络 Tarjan 图论
    洛谷 1373 dp 小a和uim之大逃离 良心题解
    洛谷 1972 莫队
    洛谷 2158 数论 打表 欧拉函数
    洛谷 1414 数论 分解因数 水题
    蒟蒻的省选复习(不如说是noip普及组复习)————连载中
    关于筛法
    关于整数划分的几类问题
  • 原文地址:https://www.cnblogs.com/demix/p/1902759.html
Copyright © 2011-2022 走看看