問題討論區


【CSS 語法】文章精華區


【分享】 解決各家瀏覽器 CSS 排版位置差異最佳的方法「Reset CSS」



解決各家瀏覽器 CSS 排版位置差異最佳的方法「Reset CSS」
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169

解決各家瀏覽器 CSS 排版位置差異最佳的方法「Reset CSS」

使用 CSS 最令人頭痛的部份就是各家瀏覽器的差異性太多了,用 CSS 寫好的網頁排版明明在 IE 6 看起來很正常,但是到了 Firefox 卻全變了樣,排版的位置都跑位了.... 更何況還有 IE7、IE 8、Safari、Opera、Google Chrome...這麼多種不同的瀏覽器,每一個看起來都是會跑位,很多網頁設計師因此而爆肝的不少!

會造成這樣大差距的主意在於「W3C 所制定的 HTML 標籤在 CSS 中的預設值 」各家瀏覽器的支援程度都不太相同,基本上 Firefox 是最聽話的一家,只要是 W3C 規定的 Firefox 都會乖乖尊守,然而最不聽話的就是 IE 瀏覽器,常常跟 W3C 唱反調....唉!

世界知名的 CSS 大師「Eric A. Meyer」提出一個很棒的解決方法「Reset CSS」主要就是針對最容易出問題的部份~例如 margin 全部統一歸 0 文字大小和行高也全部統成一樣的大小 .... 等,只要掛上這一段「Reset CSS」語法,就可以讓所有的各家瀏覽器乖乖聽話,呈現一樣的結果,CSS 的大同世界就在這裡啊!

「Reset CSS」的語法如下:


/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    
margin: 0;
    
padding: 0;
    
border: 0;
    
outline: 0;
    
font-size: 100%;
    
vertical-align: baseline;
    
background: transparent;
}
body {
    
line-height: 1;
}
ol, ul {
    list-
style: none;
}
blockquote, q {
    
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    
content: '';
    
content: none;
}

/* remember to define focus styles! */
:focus {
    
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    
text-decoration: none;
}
del {
    
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    
border-collapse: collapse;
    
border-spacing: 0;
}

下載: http://meyerweb.com/eric/tools/css/reset/reset.css

來源: http://meyerweb.com/eric/tools/css/reset/

只要在我們寫的 CSS 之前掛上這一段「Reset CSS」的語法,就可以輕鬆解決各家瀏覽器的差異了喔,真是佛心來的。


2009/4/21 2:45
 


回覆: 解決各家瀏覽器 CSS 排版位置差異最佳的方法「Reset CSS」
會員一級
註冊日期:
2009/4/19 6:26
來自 台北
留言: 2
謝謝姜老師的提供
我剛剛的問題也解決了^_^

小雨

2009/4/24 13:27
 


回覆: 解決各家瀏覽器 CSS 排版位置差異最佳的方法「Reset CSS」
會員一級
註冊日期:
2009/4/26 7:38
留言: 1
謝謝姜老師
下了

2009/4/26 7:44
 


回覆: 回覆: 解決各家瀏覽器 CSS 排版位置差異最佳的方法「Reset CSS」
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
不習慣文字行高的繼承關係的同學~

可以先把 line-height: 1; 這一句刪掉~

這樣用起來就跟我們上課時原本使用的 reset.css 比較像了



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}


2009/4/27 21:05
 


回覆: 解決各家瀏覽器 CSS 排版位置差異最佳的方法「Reset CSS」
會員一級
註冊日期:
2010/2/1 20:11
留言: 1
請問,我將程式碼貼上以後,Firefox還是會跑版,這是為什麼呢?

2010/2/1 20:15
 


回覆: 回覆: 解決各家瀏覽器 CSS 排版位置差異最佳的方法「Reset CSS」
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
要看過你的網頁~ 我們才能幫你找到問題喔~

2010/2/1 21:01
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS