1. 程式人生 > >測試DOCTYPE在各種瀏覽器上的Quirks模式和標準模式

測試DOCTYPE在各種瀏覽器上的Quirks模式和標準模式

首先宣告, 討論這個問題本文不具備太大的現實意義, 就好比花大筆墨討論用java1.1重寫我們目前的專案會有哪些影響一樣. 但是做web開發, 難免要接觸它. 我各人覺得quirks模式翻譯為怪異模式不是很好, 至少我花了好久才揣摩出它的真正含義. 簡單來說, quirks模式就是相容模式, 就是讓相對較新的瀏覽器相容舊瀏覽器, 讓較新的瀏覽器表現的像舊的瀏覽器一樣, 包括再現舊瀏覽器中已知的bug. 從開發者的角度來說, 就是讓我們今天寫出來的程式碼, 能夠在舊的瀏覽器(比如ie5)上正確地表現. 除了相容(quirks)模式和標準模式, 還有過渡(transitional)模式, 即沒有完全相容舊版本的bug.

DOCTYPE, 一般出現在html文件的第一行就是用來觸發瀏覽器的渲染模式. 根據mozilla網站上一篇文章的介紹, DOCTYPE在HTML5中僅僅用來觸發標準模式, 舊版本的HTML可能會給予DOCTYPE更多的含義, 但是還沒有哪個瀏覽器用DOCTYPE來做除了切換相容模式以外的事情. 我們不妨用下面的code來檢測一下瀏覽器的渲染模式:

<!-- DOCTYPE Here -->
<html>
	<head><title>DOCTYPE Test</title></head>
	<body><div id="d"></div></body>
	<script>
		function $(id){
			return document.getElementById(id);
		}
		$('d').innerHTML = document.documentMode + '<br />' + document.compatMode
	</script>
</html>
我挑選瞭如下一些DOCTYPE的宣告方式, 得到如下的結果:
DOCTYPE宣告 說明 IE8 FF Chrome
<!DOCTYPE HTML> HTML5推薦的方式 CSS1Compat CSS1Compat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
嚴格模式宣告並給出DTD URL CSS1Compat CSS1Compat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 嚴格模式宣告但不給出DTD URL CSS1Compat CSS1Compat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
過渡模式並給出DTD URL CSS1Compat CSS1Compat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 過渡模式但不給出DTD URL BackCompat BackCompat

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"somethingbad">


http://www.cs.tut.fi/~jkorpela/quirks-mode.html

有點難總結,未完。。。