<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 來整理。但那個佈局只用到了很少一部分特性,應該還有更多的潛力可以挖,慢慢研究吧。