温故而知新，可以为师矣

重置元素的CSS样式来解决浏览器的不兼容性

作者：admin　时间：12.21.2009　类别：CSS

我们知道，不同的浏览器显示同一个网页总会或多或少有些差异，事实上所有的浏览器都是不一样的，其实大家如果可以想到，不同的浏览器是由不同的公司，不同的人，不同的开发工具，不同的语言来写出来的，那大家都可以理解这些差异了。一个段落标记p在不同的浏览器中它的默认margin、padding和font-size分别是多少？如果你研究一下你会很吃惊的，因为不同的浏览器相差很大。要处理这些浏览器间的差异，你可以使用CSS reset style来重置HTML元素到一个统一的初始样式，然后在此基础上进行定制。
早期人们为了对付浏览器间margin、padding和border的差异，我们经常能看到下面这个CSS规则：

1
2
3
4
5
* {
    margin: 0;
    padding: 0;
    border: 0;
}

这条规则对每一个元素都要设定其样式，所以它对浏览器的性能影响比较大。随着人们进一步地研究讨论，Eric Meyer和其它一些CSS牛人创建了一套更完整，效果更好的CSS reset style：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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,
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-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

如果你想要进一步了解Eric Meyer的CSS reset style，可以点击这里。

Tags: , ,

回复