跨瀏覽器相容性網頁設計

      

研究成果

1. 浮動屬性雙倍邊距問題(Double-Margin Bug of float)
問題瀏覽器:IE6
問題描述:在「浮動元素」中若邊距方向與浮動方向一致時會發生「邊距大小變為雙倍」的狀況。例如:div { float: right; margin-right: 20px;},此時右邊距為變為 40px。
解決方法:將浮動元素之「顯示(display)屬性」設為 inline。例如:div { display: inline;}。


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


進階CSS/HTML之跨瀏覽器相容語法

垂直置中: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

陰影效果:Drop shadow with CSS for all web browsers
按:最好在 .shadow 中再加入背景設定 background: none repeat scroll 0 0 #FFFFFF;

Flash 跨瀏覽器相容語法

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

瀏覽器呈現相異處經驗整理

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

例如:
  美寶首頁

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

瀏覽器模式

Quirks Mode (維基百科):

Activating Browser Modes with Doctype

瀏覽器市占率(2010年8月至2011年8月)


相關資料

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 設計注意事項

跨瀏覽器相容性網頁設計的論壇文章
[ 發表文章 ]
[IMG] 圖像標籤跨瀏覽器解析:alt 屬性與 title 屬性於圖像替代文字與圖片標題的差異 JinJin2012/02/29
Re: 圖像標籤img的跨瀏覽器案例解析:圖像下方產生間隙 HP2012/02/13
圖像標籤img的跨瀏覽器案例解析: IE 5.5 / 6 不支援 PNG 圖片透明背景 JinJin2012/02/12
Re: 圖像標籤(img)的跨瀏覽器案例解析:圖像下方產生間隙 HP2012/02/10
[IMG][IE6/7] 圖像標籤跨瀏覽器解析:圖像下方產生間隙 JinJin2012/02/10
表單屬性list-style-image的跨瀏覽器案例解析:將清單項目的開頭符號設為圖像時,其垂直位置會偏離 JinJin2012/02/10
文字屬性font的跨瀏覽器案例解析:使用%來設定大小的文字,其顯示狀況會因瀏覽器而異 JinJin2012/02/10
浮動屬性Float的跨瀏覽器案例解析:在IE中,用了%設定寬度之float多欄式版面會無法正常顯示 JinJin2012/02/10
段落標籤(p)的跨瀏覽器案例解析:段落標籤(p)預設前後邊距問題 JinJin2012/02/09
清單標籤(ul ol li)的跨瀏覽器案例解析: IE瀏覽器瀏覽器下列表式型無效的問題 JinJin2012/02/09
Default style sheet for HTML 4 JinJin2012/02/09
[CSS][Table] cellpadding=0 效果等於 td {padding:0;} - Re: 表格的製作 HP2012/02/05
[列表] 常見跨瀏覽器相容問題整理 JinJin2012/01/17
臺大校訊 NTU Newsletter (IE8/Chrome/Firefox) - Re: [CSS] 跨瀏覽器不相容情形之網頁實例整理 HP2012/01/02
作業七/八跨瀏覽器修正建議 (IE6) HP2011/12/07
浮動屬性Float的跨瀏覽器案例解析:雙倍邊距、浮動元素寬度、3像素空隙問題 JinJin2011/12/04
Re: [作業07] 以Float:浮動,製作雙欄網頁 倩倩倩*2011/12/04
[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6) JinJin2011/11/04
[講義01] 以 HTML 與 CSS 完成第一個網頁 JinJin2011/10/17
[CSS] 各主流瀏覽器不相容情形之網頁實例整理: IE6、IE8、Firefox、Chrome (2011) HP2011/07/20
[ 瀏覽文章 ]

跨瀏覽器相容性網頁設計的分類地圖


Views: 6,598