歡迎光臨美寶平台! │ 我的書桌會員登入免費註冊美寶平台專區首頁專區地圖
│ 跨瀏覽器相容性網頁設計 │

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


週別      進度
第一週 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 屬性於圖像替代文字與圖片標題的差異JinJin930702/29/2012 01:43AM
 Re: 圖像標籤img的跨瀏覽器案例解析:圖像下方產生間隙HP450802/13/2012 04:09PM
 圖像標籤img的跨瀏覽器案例解析: IE 5.5 / 6 不支援 PNG 圖片透明背景JinJin591402/12/2012 02:00AM
 Re: 圖像標籤(img)的跨瀏覽器案例解析:圖像下方產生間隙HP436002/10/2012 07:44PM
 [IMG][IE6/7] 圖像標籤跨瀏覽器解析:圖像下方產生間隙JinJin905102/10/2012 09:20AM
 表單屬性list-style-image的跨瀏覽器案例解析:將清單項目的開頭符號設為圖像時,其垂直位置會偏離JinJin538102/10/2012 01:38AM
 文字屬性font的跨瀏覽器案例解析:使用%來設定大小的文字,其顯示狀況會因瀏覽器而異JinJin223602/10/2012 01:35AM
 浮動屬性Float的跨瀏覽器案例解析:在IE中,用了%設定寬度之float多欄式版面會無法正常顯示JinJin272102/10/2012 01:31AM
 段落標籤(p)的跨瀏覽器案例解析:段落標籤(p)預設前後邊距問題JinJin427302/09/2012 02:38PM
 [講義01] 以 HTML 與 CSS 完成第一個網頁JinJin2454810/17/2011 01:27PM


   論壇文章

Views: 4,010