最近在學習jQuery以及一些相關外掛程式，深感ajax的強大，同時也為以前藐視javascript而感到慚愧。有時間一定要系統地惡補一下JavaScript。
今天需要一個JavaScript實現的對話方塊，正好從網上找到了jqModal，它是jQuery的一個外掛程式。粗粗使用了一下，感覺挺不錯的，很便捷。但問題也隨之而來了。
癥狀：
jqModal的overlay在Firefox裡表現良好，在IE6裡也一些正常。但是在IE8裡出現了異常情況。overlay層本應該將原來的頁面內容遮住，然後在overlay層上面再顯示出對話方塊div。然而，IE8裡，overlay層跑到了原有頁面的頂部，而原有頁面內容仍然暴露在下面。
這太奇怪了！我又重新看了看jqModal的線上demo，在IE8下面沒有表現異常啊？我把demo代碼拷貝到本地，存成html，問題重現。真是莫名其妙。於是開始在網上尋找治病良方。
費了n久，終於在一篇文章裡找到了答案，趕快記下來，免得以後忘了。原文地址：
http://old.nabble.com/jqModal-Overlay-not-positioned-correctly-td13798239s27240.html
問題原因：
沒有使用合適的DOCTYPE聲明。需要使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我重新查了jqModal的線上demo，果然使用的是這個聲明。我在拷貝的時候，只粘了<html>部分，沒粘這裡。而MyEclipse自動產生的是
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，所以出現異常。
我將正確的聲明改好以後，問題解決。我又使用了html的strict dtd聲明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
也沒問題，看來是strict dtd的作用。
現在是知其然了，但還不知其所以然。光尋找這個答案就費了n久，就像文章裡那個老外說的一樣：“
It took me ages (well couple of hours) to figure it out.
”
Annoying huh? It took me ages (well couple of hours) to figure it out.
Add this at the beging of your html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Now it should work for you...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
