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