跨瀏覽器相容性網頁設計

      

跨瀏覽器相容性網頁設計進度表


週別      進度
第一週 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)



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;。(此為正規作法)

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

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

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: 2,571