Reset CSS – 將元素重置,讓各瀏覽器解讀一致化

張貼者: william pai On 下午3:12
各自為政的瀏覽器戰國時代
標準化網頁設計(HTML & CSS)是由 W3C 協會所制定的。但使用 CSS 排版最令設計師感到無力的就是每家瀏覽器解讀差異性太大,通常排好版面在IE看正常,卻在Firefox瀏覽器"差很大",更何況還有Safari、Opera、Google Chrome等等的瀏覽器,每一個看起來版面都會跑掉,讓很多網頁設計師氣炸了!

世界知名的 CSS 大師「Eric A. Meyer」整理出「Reset CSS」的方法,讓各家瀏覽器解讀元素的預設值"重置",就可以讓所有的各大瀏覽器乖乖聽話,呈現一樣的結果,CSS 的大同世界就在這裡啊!
/*將所有元素的內距邊界歸零*/
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;
}
/*重置頁面基本字型大小及行高,不希望行高被繼承可把line-height: 1拿掉*/
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 75%;
line-height: 1;
}
/*將標題的字型大小及粗細都重置*/
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
/*將影像及欄位集的邊框歸零*/
img, fieldset {
border: 0;
}
/*將清單樣式清除*/
ol, ul {
list-style: none;
}
/*將表格邊框的預設值separate(分離)改為collapse(重疊)*/
table {
border-collapse: collapse;
border-spacing: 0;  //針對不同瀏覽器須再將儲存格間距設為0 
}
/*重置表格註解及標題儲存格的對齊*/
caption, th {
text-align: left;
}
/*將連結、底線、刪除線重置*/
a, ins,del {
text-decoration: none;
}
/*將表單元素的字型樣式設為繼承(父元素)樣式保持一致性*/
input, button, textarea, select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/*將這些元素的字型樣式及粗細重置*/
address, caption, cite, code, dfn, em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}
/*將縮寫元素的邊框及大小寫重置,acronym對IE5瀏覽器有用(雖然已沒人用IE5了)*/
abbr,acronym {
border: 0;
font-variant: normal;
}
/*將上標、下標的樣式重置*/
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/*將引用元素重置,讓各瀏覽器的符號一致*/
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
resetcss file:download

1 Response to "Reset CSS – 將元素重置,讓各瀏覽器解讀一致化"

  1. Unknown Said,

    感謝!被Chrome的user agent stylesheet苦惱許久

     

張貼留言