元素,XHTML 文档中的根元素,再熟悉不过了。不过最近折腾一个布局,发现在 IE 中,它不是那么简单的角色,有一些很特殊的“性质”,总结一下备查:
IE6 标准模式:
不管给它设置什么样的高度和宽度,它的大小都始终充满整个视区。
不管给他设置什么样的 padding 和 border,同样,大小始终充满整个视区。
margin 会被忽略。
initial containing block 是视区矩形减去 的 border 宽度
用 CSS3 来表述,我们可以把 IE6 中的 看成 heigh:100%; width:100%; box-sizing:border-box; 的一个特殊元素,而且这些属性不可变。
IE7 标准模式:
IE7 虽说修复了 IE6 的若干 CSS bug,但对于 的理解,要比 IE6 复杂得多。IE6 虽然诡异但可以改的属性毕竟少,所以还算简单。IE7 的 倒是可以接受更多的属性了,但算法却不按照规范老老实实的来,所以搞明白它要比 IE6 头疼得多。
首先是自动扩展特性。
元素在 y 方向上比较简单,和 IE6 对普通元素 height 的理解方式类似——如果内容高度超过 的高度,或者 没有定高(即默认值 auto),那么 会自动扩展自身高度以包含其中内容。
而在 x 方向上有些诡异,问题主要集中在对