測試DOCTYPE在各種瀏覽器上的Quirks模式和標準模式
阿新 • • 發佈：2019-02-05
首先宣告, 討論這個問題本文不具備太大的現實意義, 就好比花大筆墨討論用java1.1重寫我們目前的專案會有哪些影響一樣. 但是做web開發, 難免要接觸它. 我各人覺得quirks模式翻譯為怪異模式不是很好, 至少我花了好久才揣摩出它的真正含義. 簡單來說, quirks模式就是相容模式, 就是讓相對較新的瀏覽器相容舊瀏覽器, 讓較新的瀏覽器表現的像舊的瀏覽器一樣, 包括再現舊瀏覽器中已知的bug. 從開發者的角度來說, 就是讓我們今天寫出來的程式碼, 能夠在舊的瀏覽器(比如ie5)上正確地表現. 除了相容(quirks)模式和標準模式,
還有過渡(transitional)模式, 即沒有完全相容舊版本的bug.
DOCTYPE, 一般出現在html文件的第一行就是用來觸發瀏覽器的渲染模式. 根據mozilla網站上一篇文章的介紹, DOCTYPE在HTML5中僅僅用來觸發標準模式, 舊版本的HTML可能會給予DOCTYPE更多的含義, 但是還沒有哪個瀏覽器用DOCTYPE來做除了切換相容模式以外的事情. 我們不妨用下面的code來檢測一下瀏覽器的渲染模式:
我挑選瞭如下一些DOCTYPE的宣告方式, 得到如下的結果:<!-- 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宣告 | 說明 | 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