怪异模式（Quirks Mode）对 HTML 页面的影响（6）元素溢出的处理

look_w

元素溢出的处理CSS 中 overflow 属性定义了一个元素的内容不适合指定的尺寸时，溢出元素内容的处理方式。默认值为 visible，即显示溢出。
描述
在 IE Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。
示例展示
如下代码段所示，我们定义一个背景为蓝色的 div a，在 a 中嵌入一个背景为橘色的 div b，设置 b 的高度 400px 大于 a 的高度 300px，使 a 发生溢出。
清单 6div.a{        width:300px;        height:300px;        background-color:blue;}div.b{        width:200px;        height:400px;                background-colorrange;}分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行，结果如图 15 和 16 所示。在 Quirks Mode 下，div a 的高度为又 300px 变为 400px，以适应 b 的大小，而在 Standards Mode 下，div a 的大小保持不变，溢出部分保留。
图 15 IE 5    Quirks Mode图 16 IE 8    Standards Mode结束语通过前文的描述我们已经知道 Quirks 和 Standards 这两种文档模式渲染页面的时候会有很大的差别，这些差别主要是由于渲染引擎在历史的发展过程中与 W3C 标准的差异性而导致的。
知道这些差异的存在和由来将对 Web 工程师的工作有很大的帮助。在新产品的开发中 Web 工程师应该让页面满足 HTML5 规范，避免浏览器工作在 Quirks    模式下。另外一点是如果在维护只能工作在 Quirks 模式下的 Web 产品时，可以从 Quirks 模式的根源来出发，考虑如何改进使得产品回到 Standards 模式，这样就可以添加进更多更好的功能。