IE中HTML元素的一些特殊的“性質”

來源:互聯網
上載者:User

<html> 元素,XHTML 文檔中的根項目,再熟悉不過了。不過最近折騰一個布局,發現在 IE 中,它不是那麼簡單的角色,有一些很特殊的“性質”,總結一下備查:

IE6 標準模式:

  • 不管給它設定什麼樣的高度和寬度,它的大小都始終充滿整個視區。
  • 不管給他設定什麼樣的 paddingborder,同樣,大小始終充滿整個視區。
  • 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> 不接受 paddingmargin
  • <body> 接受 paddingmargin 但負值 margin 沒有視覺效果,不過會在計算其他相應參數時帶入。
  • <body>border, background 等屬性會向上轉移給 <html> 元素。
  • initial containing block 是 <body>padding 邊緣。

用處

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

另外上面總結的東西都是簡單實驗試推出,所以很可能有理解錯誤的地方,如果閱讀本文的朋友發現了,希望可以留言告知。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。