IE中HTML元素的一些特殊的“性质”
日期：2013-08-11 浏览次数：21342 次
<html> 元素，XHTML 文档中的根元素，再熟悉不过了。不过最近折腾一个规划，发如今 IE 中，它不是那么简单的角色，有一些很特殊的“性质”，总结一下备查：
IE6 标准模式：
- 不管给它设置什么样的高度和宽度，它的大小都一直充满整个视区。
- 不管给他设置什么样的
padding和border，同样，大小一直充满整个视区。 margin会被忽略。- initial containing block 是视区矩形减去
<html>的border宽度
用 CSS3 来表述，我们可以把 IE6 中的 <html> 看成 heigh:100%; width:100%; box-sizing:border-box; 的一个特殊元素，而且这些属性不可变。
IE7 标准模式：
IE7 虽说修复了 IE6 的若干 CSS bug，但对于 <html> 的理解，要比 IE6 复杂得多。IE6 虽然诡异但可以改的属性毕竟少，所以还算简单。IE7 的 <html> 倒是可以接受更多的属性了，但算法却不按照规范老老实实的来，所以搞明白它要比 IE6 头疼得多。
首先是自动扩展特性。
<html>元素在 y 方向上比较简单，和 IE6 对普通元素height的理解方式类似——如果内容高度超过<html>的高度，或者<html>没有定高（即默认值auto），那么<html>会自动扩展本身高度以包含其中内容。而在 x 方向上有些诡异，问题次要集中在对
<body>宽度的理解，这里分两种情况讨论：（不是说<html>么，怎样又说到<body>的宽度了？由于<html>要自动扩展，必需要知道<body>有多宽才好扩展嘛。）第一种情况：
<html>的width如果是非 0 值之外的一切值（包括默认值auto），那么<body>的宽度由以下规则决定：- 1. 如果
<body>的width是个固定值，那宽度就是这么多。 - 2. 如果
<body>的width是默认值auto，那宽度会充满<html>的内容空间。 - 3. 如果
<body>本身有收缩包围特性，比如被设置了position:absolute或者display:inline（奇怪的是 float 却不满足这一条，它满足2），那么就依据内容的宽度来定。
- 1. 如果
- 第二种情况：如果
<html>的width是 0，那第 1、3 点和上面的情况相反，而第 2 点，如果<body>的width是默认值auto，那宽度会依据内容自顺应，但有一个奇怪的景象，就是如果<body>同时具有不为 0 的border或者padding时，它的宽度就不会依据内容自顺应而会变成第一种情况下的第 2 点——充满<html>的内容空间，由于这时<html>的宽度是 0，所以<body>宽度也坍缩成 0。
其次是
<html>的宽高设置会奇怪地影响<body>的百分比参考（或者说<body>的 containing block）。在 y 方向上，如果
<html>的height是默认值auto，那么<body>的height如果取一个百分比的值，将会被忽略。但一旦<html>的height值有了一个具体高度，哪怕是 0，<body>的百分比高度就会被使用了。不过诡异的是，这个百分比高度的计算参考并不是刚刚设置的<html>的高度，而是视区高度减去<html>的margin+border+padding高度之和。而在 x 方向上，如果
width取默认值auto，和 y 方向不同，<body>的百分比宽度将不会被忽略，但其计算参考照旧和 y 方向一样诡异，为视区宽度减去<html>的margin+border+padding宽度之和。如果width有了具体取值，它就会取而代之作为<body>的百分比宽度参考。- 再次，当
<body>设置为position:absolute时，<html>的border-color会失效。这是另外一个奇怪的 bug。 - 最后，initial containing block 采用视区矩形，这个基本正常。但无法使
<html>创建绝对定位元素的 containing block，不过也许<html>创建的 containing block 就是视区矩形，谁知道呢。
好乱，整理下来除了头大还是头大，不知道当前回过头再看还能不能看明白。IE7 啊 IE7……想说爱你不容易……
IE5 以及 Quirks 模式
<html>和<body>所有宽高设置都会被忽略而保持充满视区。<html>不接受padding和margin。<body>接受padding和margin但负值margin没有视觉效果，不过会在计算其他相应参数时带入。<body>的border,background等属性会向上转移给<html>元素。- initial containing block 是
<body>
