IE中HTML元素的一些特殊的“性质”
2008-02-23 08:39:07来源：互联网 阅读 ()
<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>的padding标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：详解网页设计中的定位与定位应用
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
