[CSS相關] 使用 CSS RESET 幫您解決各個瀏覽器CSS預設值差異的問題

byadmin 發表於 2013-6-4 21:48:52 , 4945人已閱讀 , 0人回應

其實有學過網頁設計的朋友應該都知道 , 每個瀏覽器其實都有他們預設的一些CSS設定 , 因此我們在設計網頁撰寫CSS的時候經常會發現 , 怎麼每個瀏覽器看到的都有些不一樣 , 例如預設的框限、內距、外距以及各種標籤樣式。要解決這個問題 , 我們必須要在撰寫CSS樣式前 , 先幫每個瀏覽器穿上相同的衣服 , 之後再開始幫他們美化 , 就可以將他們外觀差距縮到最小 (因為即便是reset後還是會有非常些微的不一樣) , 這就是CSS Reset最大的用意了 ~

下面引用一下小魚老師所撰寫的CSS RESET , 裡面有很詳細的註釋 , 幫助了解這些RESET值的意義：

@charset "UTF-8";
/*
Fishbecat Reset CSS
(c) 2008, 小魚扮貓 http://www.fishbecat.com/
Based on YUI http://developer.yahoo.com/yui/reset/ and Eric Meyer http://meyerweb.com/eric/tools/css/reset/
version: 1.2 | create: 20080901 | update: 20101127
*/
/*將有內距外距的元素歸零，避免不同瀏覽器內外距不同而錯位*/
body, h1, h2, h3, h4, h5, h6, p, blockquote, th, td, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, button, textarea {
margin: 0;
padding: 0;
}
/*重置頁面基本字型大小及行高*/
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
line-height: 1;
}
/*將標題的字型大小及粗細都重置*/
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
/*將影像及欄位集的邊框歸零*/
img, fieldset {
border: 0;
}
/*將清單樣式清除，其實只要list-style: none就好了，後面都是為了特定瀏覽器*/
ol, ul {
list-style: none;
}
/*將表格的邊框設定為結合，小魚覺得分離好醜；其實一行就夠了，第二行是為了特定瀏覽器*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*重置表格註解及標題儲存格的對齊*/
caption, th {
text-align: left;
}
/*將連結、底線重置；其實應該要再加上一個 del 刪除線的，但小魚常常用del就不重置了*/
a, ins {
text-decoration: none;
}