重置元素的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，可以点击这里。