跨瀏覽器相容性網頁設計

週別　　　　　　進度

第一週　09/09　課程規劃

第二週　09/16　1.DOCTYPE宣告(HP)，跨瀏覽器問題整理，2.問題與優質網站整理(JIN)

第三週　09/23　Box Model(JIN),overflow(HP)

第四週　09/30　1.Position(HP)，2.網站分析(JIN)

第五週　10/07　float(JIN)

第六週　10/14　1.搜尋列(HP)，2.網站分析(JIN)

第七週　10/21　IE6不相容問題整理(JIN)

第八週　10/28　1.，2.網站分析(JIN)

垂直置中：Vertical-align:middle

支援IE的單行及多行垂直置中語法(相當複雜)：

水平置中：margin: auto / text-align: center

支援 IE 作法 - 在父層 DIV 中設定 text-align: center; 讓子DIV置中，再於子 DIV 設定 text-align: left; 將子DIV的文 字正常地置左。(此為針對IE之特殊作法)

支援 Firefox/Chrome 等瀏覽器作法 - 無需在父層DIV中設定，直接在子DIV中加入 margin: auto;。(此為正規作法)

陰影效果：Drop shadow with CSS for all web browsers

按：最好在 .shadow 中再加入背景設定 background: none repeat scroll 0 0 #FFFFFF;

Flash 跨瀏覽器相容語法

最大寬度兼容語法: max-width

在 table td 中使用 valign=top 時，若內容中有圖片也有文字，則在大部份的瀏覽器中(IE、Firefox)，文字是置底。在Google Chrome中，則是置頂。

例如：

在 Firefox 中，<p> 所代表的段落前後會自動留有一個行高的 margin。其他瀏覽器基本上都沒有。這個留有一個行高的作法是參考 W3C 的建議，維持 Firefox 一貫的原則。而「行高」原則是以當下段落的 font-size 決定。

Quirks Mode (維基百科)：

Activating Browser Modes with Doctype

CSS Tutorial: Browser-compatibility Issues (瀏覽器相容性議題)

IE6 Bug大盤點，看看你都遇到過哪些

8個讓你網頁不相容IE 8的CSS樣式寫法(2009)

兼容IE与FF浏览器的CSS技巧

IE 和 Firefox CSS 兼容性问题分析

IE6: Line-height / Replaced Element Bug

HTML Email 設計注意事項