html元素 xhtml文檔根元素特性小結

2024-08-26 00:14:46

字體：大中小

來源：轉載

供稿：網友

　　<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），那么就根據內容的寬度來定。

　　第二種情況：如果 <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 邊緣。

用處
　　這個總結是從一開頭的布局問題引出來的，那個布局問題就是用處之一，等下重寫一個 post 來整理。但那個布局只用到了很少一部分特性，應該還有更多的潛力可以挖，慢慢研究吧。

上一篇：HTML打造極具親和力的連接

下一篇：HTML高級教程聲明