跨瀏覽器相容性網頁設計

1. 浮動屬性雙倍邊距問題（Double-Margin Bug of float）

介紹網頁：http://mepopedia.com/forum/read.php?844,18331

2. 浮動屬性寬度問題（Float-Width Bug）

問題瀏覽器：IE6/IE7

問題描述：

當「浮動元素」後接著一個「指定寬度的正常區塊元素」時，這個區塊元素會不正確地「換行」，也就是之前浮動元素失去浮動效果。

解決方法：

1) 不要對接在浮動元素之後的區塊元素設定寬度。若要控制區塊的位置或達到排版上的美觀，可用左邊距（margin-left）的設定來控制。

2) 將接在浮動元素之後的區塊元素也設為浮動元素（例如：float: left）。

3. 段落標籤(p)預設前後邊距問題

相異瀏覽器：

IE6、IE7

問題描述：

一般瀏覽器對段落標籤預設有以「一個字體大小(font-size) = 1em」為高度的前邊距 (margin-before)與後邊距 (margin-after)，使得段落間在排版上有一定的區隔。但在IE6與IE7中則沒有此前後的預設邊距。（註：margin-brefore/-after 效果與 margiin-top/-bottom 相似。）

解決方法：

1) 使用 CSS Reset：無論使用時希望或不希望有預設的前後邊距，都可以在共用的 CSS 檔案中設定屬性值。例如：

p {margin: 0;} 或 p {margin: 1em 0;}

參考文章：

甲、優良網站與跨瀏覽器不相容網站之實例分析：

藉由實例分析一則可了解實務上現有網站之缺陷，與跨瀏覽器常見之不相容問題，二則可歸納出跨瀏覽器網站之主流作法，與進一步提升現有設計之可能。

乙、分析綱要包括以下之項目：

a.網站佈局（Layout）分析-- 針對上左中右下（header、left、middle、right、footer）的排版模式分析。

b.網站常見功能與元件分析：功能列（menu）、清單（list）、搜尋列（search　bar）、表格（table）、以及其他動態效果等做探討與整理建議。

期中報告：2012年2月15日

報告內容包括跨瀏覽器相容性設計原則及具體設計建議與規範，要點至少包括：

a.Box Model（區塊模型）基礎原則及設計要項

b.CSS Layout（CSS排版）設計原則

c.Table（表格）設計原則

d.Menu（功能列／表單）設計原則

e.List（清單）設計原則

f.Vertical-align（垂直置齊）設計原則

g.Overflow（捲軸控制）設計規範

期末報告：2012年8月15日

報告內容括跨瀏覽器相容性之進階功能之設計原則與注意要點、上半年報名之修正與改建，以及全研究案之整合。就進階功能設計規範之要點至少包括：

a.Search bar（搜尋列）設計規範

b.圓弧邊角設計規範

c.三角形設計規範

d.CSS進增語法整合性效果設計規範

e.CSS相關動態功能設計規範

週別　　　　　　進度

第一週　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　CSS3 漸層語法　

第八週　10/28　垂直與水平置中的語法(JIN)

第九週　11/04　導覽列(JIN)

第十週　11/11　IE6不相容問題整理 (JIN)

研究參與人：JIN、HP

相關主題：文件型態與接縫模式（DOCTYPE & Quirks Mode）

垂直置中：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;。(此為正規作法)

捲軸 overflow

捲軸 overflow 針對 IE 的跨瀏覽器使用：設定 width、加上 overflow-y: hidden、設為 block (2011)

Fixing IE overflow problem (2008)

陰影效果：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 (瀏覽器相容性議題)

Internet Explorer CSS bug fixes

Explorer Exposed (許多的 IE 問題分析與討論，主要為 IE6)

Web 開發 跨瀏覽器開發論壇

【分享】瀏覽器兼容性問題目錄

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

No, Internet Explorer did not handle it properly (一個詳細整理 IE 不相容情形的英文網站)

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

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

IE 和 Firefox CSS 兼容性问题分析

IE6: Line-height / Replaced Element Bug

HTML Email 設計注意事項

http://jas9.blogspot.com/2007/01/html-email.html 1. 1. 1. 1.