摘要:IE 6 的 Standard mode 與 Quirk mode
原本以為一個 HTML table 的位置自動至於網頁中央是簡單任務,沒想到卻花了好多時間。後來才了解原來問題跟 IE 6 的 Standard mode 和 Quirk mode 有關。
首先我在 FrontPage 裡面撰寫 HTML 和 JavaScript 以便測試,網頁原始碼如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>aaa</title> </head> <body> <div id="div1" style="width:200; height:150"> <table id="Table1" border="0" style="z-index: 100; left: 10px; position: absolute; width:100%; top: 15px"> <tr> <td>aaa</td><td>bbb</td><td>ccc</td> </tr> <tr> <td>111</td><td>222</td><td>333</td> </tr> <tr> <td>qqq</td><td>www</td><td>zzzz</td> </tr> </table> </div> <script type="text/javascript"> <!-- function window.onload() { var obj = document.getElementById("div1"); div1.style.position = "absolute"; div1.style.left = (document.body.clientWidth - obj.offsetWidth) / 2; div1.style.top = (document.body.clientHeight - obj.offsetHeight) / 2; } // --> </script> </body> </html>
我把表格包在一個 <div> 裡面,然後設定 <div> 的定位方式為絕對定位,並且指定其 left 和 top 屬性,使它定位在視窗的中心位置。上面的網頁在 FrontPage 和 IE6 裡面測試都沒問題。
接著就把寫好的程式碼移到 ASP.NET 網頁裡面,然後用 IE6 檢視網頁。結果卻跟之前測試的不一樣,<div> 有水平置中,可是垂直座標卻跑到視窗的上邊界之外了。用 alert(document.body.clientHeight); 測試一下,發現 clientHeight 竟然是 0。
用 Google 搜尋了一下,找到這篇討論串:
Why docType affects clientHeight?
才知道原來只要網頁前面加上了 DTD 宣告,IE6 就無法設定正確的 clientHeight,可是 clientWidth 卻是正確的。由於 clientWidth 和 clientHeight 不是 W3C 的標準,如果網頁裡面沒有寫 DTD 宣告,IE 6 會以 Quirk mode 方式處理網頁,此時 IE 6 特有的功能和屬性都可以用。但如果網頁上有寫 DTD 宣告時,IE 6 會以 Standard mode 處理網頁,導致 IE 6 特有的功能失效。而 Visual Studio 預設會幫 ASP.NET 網頁加上 DTD 宣告,這也就是為什麼同樣的 JavaScript 搬到 ASP.NET 網頁就無法正常運作的原因。
進一步說明: