2009年5月13日 星期三

網頁的文件定義

最近客戶常常反應網頁的排版有問題...原來是微軟已經把 IE 8 設為更新的項目之一!!! 囧

剛好公司都有訂購 iThome 的雜誌,翻了一下才知道 IE 8 與其之前版本的差異頗大....

根據 iThome 393期的報導指出,IE 8 遵循國際網頁標準,那...也就是說之前的版本(IE 7、IE 6)都不符合,

才會導致網頁設計師常常為了 FF 與 IE 兩套瀏覽器需要各自撰寫。囧

雖然微軟有針對邁向標準化提出向下相容的作法,但是實際上,使用後發現,原本在IE 7與IE 6能正常顯示的,

使用IE 8 的相容性檢視卻還是會出問題,也證明了它的相容性檢視並不是直接用IE 7的kernel來剖析。

那我們有沒有什麼辦法是可以強制瀏覽器在瀏覽網頁的時候一定要使用相容性檢視呢?我們只要在表頭(<head></head>)間添加底下這行:

<meta http-equiv="X-UA-Compatible" Content="IE=EmulateIE7">

在這邊要注意一件事,雖然我們在表頭間加了上面這一行,

但是記得要在檔案的開頭加上 Doctype 的定義,好讓瀏覽器知道要用什麼Document Type Definition(DTD, 文件型別定義)。

之前雖然常常看到這些字詞,但是對於它的用途實在是一知半解,

後來終於上 W3Schools 查了一下它的用法以及相關的語法,以及下面參考來源所列的網站,

原來 doctype 的用途是告知瀏覽器頁面是用哪一個版本的標記語言寫成的,由於它會refer要用哪個DTD,

所以瀏覽器可以正確地描繪頁面。而文件型別定義大致可以分成三類,

嚴格型(Strict)過渡型(Transitional)和框架型(Frameset),其語法依序列於下方:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

講完 doctype 後,還有兩個內容要提及,分別是 <meta><link> ,在這邊列出常用的內容,

Metadata 是關於網頁資料的資訊,它雖然不會顯示在頁面上,但是搜尋引擎會針對這些資訊解析,

告知搜尋引擎正確資訊,讓瀏覽者針對網站相關主題搜尋時更快被找到,

而下面這一行是告訴瀏覽器此頁面的編碼為UTF-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

現在有很多網站在網址列旁邊會有一個小圖示,

而下面這一行就是告知瀏覽器網頁有一個小圖示,這個圖示一般都放在網站的根目錄下


<link rel="icon" href="/favicon.ico" type="image/x-icon"/>

參考來源:

W3Schools

馬老師的網事部落

月光論壇

iThome

1 則留言:

  1. 基本上…M$口中所說的標準,
    我覺得…應該是他自己定義出來的吧…

    只能說,IE8是比較沒那麼多「獨特點」而已,
    畢竟在M$的眼中,W3C能算得上定標準的單位嗎??

    回覆刪除