0

今天踩到一個詭異 IE 問題，耗去近一個小時，抽絲剝繭才理出頭緒。

改寫某個 IE Only 老網頁，改完用本機 IIS 測試是壞的，原以為程式被我改壞，因為修改前的版本在測試台 IIS 是好的。退回修改前的版本總可以了吧？沒想到程式仍然不正常，讓我當場傻眼，拼命想找出測試台跟本機檔案的差異，但確認兩邊檔案完全一致。

沒辦法，只好打開 F12 逐行偵錯，一步步追到錯誤源頭，發現有段 $('.selector')[0].SomeAttr 寫法有問題，預期該傳回 Attibute 值，在本機跑時傳回 undefined。

深入比對找到關鍵(如下圖)，上面測試台正常執行的結果，下面是本機出錯的狀況。正常執行時會有個「連結的網頁目錄是文件模式 7。某些主控台與功能可能無法使用/The attached page targets document mode 7. some console apis and features may not be available.」警示訊息，此時 $('body')[0] 似乎是個 JavaScript 物件；出錯時則有文件模式警示，$('body')[0] 看起來是 DOM 元素，用 Chrome/Edge 測試也會是這種結果：

傳回 JavaScript Object 可用 object.AttributeName 方式存取 Attribute 值，傳回 DOM 元素則不行，決定了程式正常與否。

進一步研究，發現這個老網頁是個 XHTML，上方還有 XHTML 1.0 Transitional 宣告，所以我可以用一個簡單的例子重現問題：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=7" />
	</head>
	<body>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	</body>
</html>

將網頁放在測試台會出現文件模式 7 警示，放在本機則不會有，足以解釋為何同一網頁在測試台 OK，在本機不行。我改用 127.0.0.1 連也 OK，眼看要得出用 IP 會有文件模式 7 警示，用 localhost 則不會的結論，但重新整理幾次，這個假設又被推翻了。

同樣是 127.0.0.1，可能出現兩種狀況，第一種會出現「連結的網頁目錄是文件模式 7。某些主控台與功能可能無法使用」警示，上方的 DOCTYPE 被 IE 加上 <!-- ... > 註解掉：

多重新載入幾次，有時文件模式 7 警示會消失，出現「HTML1524: HTML5 DOCTYPE 無效。請考慮使用互通格式 "<!DOCTYPE html>"。」，而最開始的 DOCTYPE 被 IE 換成 <!DOCTYPE html>：

IE 已是末日黃花，不想再花時間深究了，把 $('.selector')[0].SomeAttr 非正規寫法改成 $('.selector').eq(0).attr('SomeAttr')，避開這個鬼問題繼續前進。

A case of XHTML 1.0 page changing diffent document after refresh in IE.


Comments

Be the first to post a comment

Post a comment