因為各大浏覽器存在兼容性問題,同一個CSS屬性在不同浏覽器下的表現不一定相同,有經驗的前端設計者都會自定義一個重置浏覽器默認樣式的CSS文件,在這個文件中定義一些針對不同浏覽器最終表現一致的代碼,大家最為熟悉的也許就是*{margin:0 0}了,其實這是最簡單照顧兼容性的代碼,一般情況下,僅有這個是不夠的,筆者收集了幾個前端設計網站使用的reset.css代碼,為您做參考,你可復制這些代碼保存為reset.CSS文件,在每個頁面中引入即可。
CSS重置浏覽器樣式代碼一:
01
body,ul,li,p,h1,h2,h3,h4,h5,h6,img,br,hr,table,tr,td,dl,dt,dd,form {
02
margin: 0;
03
padding: 0;
04
}
05
body {
06
font-family: Arial,"微軟雅黑";
07
font-size: 12px;
08
color: #434343;
09
}
10
.clear {
11
clear: both;
12
font-size: 0px;
13
}
14
ul,li {
15
list-style: none;
16
}
17
img {
18
border: none;
19
}
20
/*一般鏈接*/
21
a {
22
text-decoration: none;
23
color: #555;
24
}
25
a: hover {
26
color: #3366ff;
27
}
CSS重置浏覽器代碼二:
01
Html, body, div, span, applet, object, iframe,
02
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
03
a, abbr, acronym, address, big, cite, code,
04
del, dfn, em, font, img, ins, kbd, q, s, samp,
05
small, strike, strong, sub, sup, tt, var,
06
b, u, i, center,
07
dl, dt, dd, ol, ul, li,
08
fIEldset, form, label, legend,
09
table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0;vertical-align: baseline; font-size: 100%; font: inherit; -webkit-text-size-adjust: none; }
10
body { line-height: 1; }
11
table { border-collapse: collapse; border-spacing: 0; }
12
object, :focus { outline: none; }
13
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section /* Html 5 */ { display:block; }
14
blockquote, q { quotes: none; }
15
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
16
a img { border: none; }
17
input,button,textarea,select,optgroup,option{ font-size: 100%; font: inherit; }
18
.al { text-align: left; }
19
.ar { text-align: right; }
20
.ac { text-align: center; }
21
.lc { margin: 0 auto; }
22
.fl, .il .fl { float: left; }
23
.fr, .il .fr { float: right; }
24
.fc, .il .fc { float: none; clear: both; }
25
.rel { position: relative; }
26
.abs { position: absolute; }
27
.il { list-style: none; }
28
.il li { float: left; }
CSS重置浏覽器代碼三:來自Eric Meyer網站:
01
Html, body, div, span, applet, object, iframe,
02
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
03
a, abbr, acronym, address, big, cite, code,
04
del, dfn, em, font, img, ins, kbd, q, s, samp,
05
small, strike, strong, sub, sup, tt, var,
06
dl, dt, dd, ol, ul, li,
07
fIEldset, form, label, legend,
08
table, caption, tbody, tfoot, thead, tr, th, td {
09
margin: 0;
10
padding: 0;
11
border: 0;
12
outline: 0;
13
font-weight: inherit;
14
font-style: inherit;
15
font-size: 100%;
16
font-family: inherit;
17
vertical-align: baseline;
18
}
19
: focus {
20
outline: 0;
21
}
22
body {
23
line-height: 1;
24
color: black;
25
background: white;
26
}
27
ol, ul {
28
list-style: none;
29
}
30
table {
31
border-collapse: separate;
32
border-spacing: 0;
33
}
34
caption, th, td {
35
text-align: left;
36
font-weight: normal;
37
}
38
blockquote: before, blockquote: after,
39
q: before, q: after {
40
content: "";
41
}
42
blockquote, q {
43
quotes: "" "";
44
}
如果你確定用不上代碼中對某一選擇器的定義,可以刪除掉。