IE 6 的 Standard mode 與 Quirk mode

2008-04-23

105238
0
ASP.NET

摘要: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 網頁就無法正常運作的原因。

進一步說明：

Doctype switching and standards compliance: An overview

回首頁