因為各大浏覽器存在兼容性問題,同一個CSS屬性在不同浏覽器下的表現不一定相同,有經驗的前端設計者都會自定義一個重置浏覽器默認樣式的CSS文件,在這個文件中定義一些針對不同浏覽器最終表現一致的代碼,大家最為熟悉的也許就是*{margin:0 0}了,其實這是最簡單照顧兼容性的代碼,一般情況下,僅有這個是不夠的,筆者收集了幾個前端設計網站使用的reset.css代碼,為您做參考,你可復制這些代碼保存為reset.CSS文件,在每個頁面中引入即可。
CSS重置浏覽器樣式代碼一:
01
body,ul,li,p,h
1
,h
2
,h
3
,h
4
,h
5
,h
6
,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
h
1
, h
2
, h
3
, h
4
, h
5
, h
6
, 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
h
1
, h
2
, h
3
, h
4
, h
5
, h
6
, 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
}
如果你確定用不上代碼中對某一選擇器的定義,可以刪除掉。