每个浏览器都有自己的默认样式，这是一段预定义的CSS，用以简单地呈现网页。在Firefox中的地址栏中输入resource://gre/res/html.css即可以看到该浏览器的默认样式。在Firebug 1.2 Alphas的styles中就可以看到默认样式对页面定义样式的影响。毫无疑问，理解和学习浏览器的默认样式能更好的理解浏览器对解析样式和呈现页面。Firefox3和Firefox2相比，默认样式仅有8处不同，但这些改变也可以让我们感觉到Firefox3在样式上的改进：
@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
/* bidi */
[dir="rtl"] {
direction: rtl;
unicode-bidi: embed;
}
[dir="ltr"] {
direction: ltr;
unicode-bidi: embed;
}
bdo[dir] {
unicode-bidi: bidi-override;
}
/* blocks */
html, div, map, dt, isindex, form {
display: block;
}
body {
display: block;
margin: 8px;
}
p, dl, multicol {
display: block;
margin: 1em 0;
}
dd {
display: block;
-moz-margin-start: 40px;
}
blockquote {
display: block;
margin: 1em 40px;
}
address {
display: block;
font-style: italic;
}
center {
display: block;
text-align: -moz-center;
}
blockquote[type=cite] {
display: block;
margin: 1em 0px;
/*** start:Firefox2 ***/
padding-left: 1em;
border-left: solid;
/*** end:Firefox2 ***/
/*** start:Firefox3 ***/
-moz-padding-start: 1em;
-moz-border-start: solid;
/*** end:Firefox3 ***/
border-color: blue;
border-width: thin;
}
span[_moz_quote=true] {
color: blue;
}
pre[_moz_quote=true] {
color: blue;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;
}
h2 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin: .83em 0;
}
h3 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
}
h4 {
display: block;
font-weight: bold;
margin: 1.33em 0;
}
h5 {
display: block;
font-size: 0.83em;
font-weight: bold;
margin: 1.67em 0;
}
h6 {
display: block;
font-size: 0.67em;
font-weight: bold;
margin: 2.33em 0;
}
listing {
display: block;
font-family: -moz-fixed;
font-size: medium;
white-space: pre;
margin: 1em 0;
}
xmp, pre, plaintext {
display: block;
font-family: -moz-fixed;
white-space: pre;
margin: 1em 0;
}
/* tables */
table {
display: table;
border-spacing: 2px;
border-collapse: separate;
margin-top: 0;
margin-bottom: 0;
/* XXXldb do we want this if we're border-collapse:collapse ? */
-moz-box-sizing: border-box;
text-indent: 0;
}
table[align="left"] {
float: left;
}
table[align="right"] {
float: right;
text-align: start;
}
table[rules]:not([rules="none"]) {
border-collapse: collapse;
}
/* caption inherits from table not table-outer */
caption {
display: table-caption;
text-align: center;
-moz-box-sizing: border-box;
}
table[align="center"] >gt; caption {
margin-left: auto;
margin-right: auto;
}
table[align="center"] >gt; caption[align="left"] {
margin-right: 0;
}
table[align="center"] >gt; caption[align="right"] {
margin-left: 0;
}
tr {
display: table-row;
vertical-align: inherit;
}
col {
display: table-column;
}
colgroup {
display: table-column-group;
}
tbody {
display: table-row-group;
vertical-align: middle;
}
thead {
display: table-header-group;
vertical-align: middle;
}
tfoot {
display: table-footer-group;
vertical-align: middle;
}
/* for XHTML tables without tbody */
table >gt; tr {
vertical-align: middle;
}
td {
display: table-cell;
vertical-align: inherit;
text-align: inherit;
padding: 1px;
}
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
padding: 1px;
}
tr >gt; form:-moz-is-html, tbody >gt; form:-moz-is-html,
thead >gt; form:-moz-is-html, tfoot >gt; form:-moz-is-html,
table >gt; form:-moz-is-html {
/* Important: don't show these forms in HTML */
display: none !important;
}
/* inlines */
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
b, strong {
font-weight: bolder;
}
i, cite, em, var, dfn {
font-style: italic;
}
tt, code, kbd, samp {
font-family: -moz-fixed;
}
u, ins {
text-decoration: underline;
}
s, strike, del {
text-decoration: line-through;
}
blink {
text-decoration: blink;
}
big {
font-size: larger;
}
small {
font-size: smaller;
}
sub {
vertical-align: sub;
font-size: smaller;
line-height: normal;
}
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
nobr {
white-space: nowrap;
}
/* titles */
abbr[title], acronym[title] {
border-bottom: dotted 1px;
}
/* lists */
ul, menu, dir {
display: block;
list-style-type: disc;
margin: 1em 0;
-moz-padding-start: 40px;
}
ol {
display: block;
list-style-type: decimal;
margin: 1em 0;
-moz-padding-start: 40px;
}
li {
display: list-item;
/** start:Firefox2 **/
-moz-float-edge: margin-box;
/** end:Firefox2 **/
}
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul, dl ol, dl dir, dl menu, dl dl {
margin-top: 0;
margin-bottom: 0;
}
/* 2 deep unordered lists use a circle */
ol ul, ul ul, menu ul, dir ul,
ol menu, ul menu, menu menu, dir menu,
ol dir, ul dir, menu dir, dir dir {
list-style-type: circle;
}
/* 3 deep (or more) unordered lists use a square */
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
list-style-type: square;
}
/* leafs */
/* gt; noshade and color attributes are handled completely by
* the nsHTMLHRElement attribute mapping code
*/
hr {
display: block;
height: 2px;
/** start:Firefox2 **/
border: 1px -moz-bg-inset;
/** end:Firefox2 **/
/** start:Firefox3 **/
border: 1px inset;
/** end:Firefox3 **/
margin: 0.5em auto 0.5em auto;
/** start:Firefox3 **/
color: gray;
/** end:Firefox3 **/
-moz-float-edge: margin-box;
-moz-box-sizing: border-box;
}
hr[size="1"] {
/** start:Firefox2 **/
border-style: -moz-bg-solid none none none;
/** end:Firefox2 **/
/** start:Firefox3 **/
border-style: solid none none none;
/** end:Firefox3 **/
}
*|*:-moz-any-link img, img[usemap], object[usemap] {
border: 2px solid;
}
/** start:Firefox3 **/
img:-moz-broken::before, input:-moz-broken::before,
img:-moz-user-disabled::before, input:-moz-user-disabled::before,
img:-moz-loading::before, input:-moz-loading::before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
content: -moz-alt-content !important;
unicode-bidi: embed;
}
object:-moz-broken >gt; *|*, applet:-moz-broken >gt; *|*
object:-moz-user-disabled >gt; *|*, applet:-moz-user-disabled >gt; *|* {
/*
Inherit in the object's alignment so that if we aren't aligned explicitly
we'll end up in the right place vertically. See bug 36997. Note that this
is not !important because we _might_ be aligned explicitly.
*/
vertical-align: inherit;
}
img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
embed:-moz-suppressed, applet:-moz-suppressed {
/*
Set visibility too in case the page changes display. Note that we _may_
want to just set visibility and not display, in general, if we find that
display:none breaks too many layouts. And if we decide we really do want
people to be able to right-click blocked images, etc, we need to set
neither one, and hack the painting code.... : (
*/
display: none !important;
visibility: hidden !important;
}
/** end:Firefox3 **/
img[usemap], object[usemap] {
color: blue;
}
frameset {
display: block ! important;
overflow: -moz-hidden-unscrollable;
position: static ! important;
float: none ! important;
border: none ! important;
}
frame {
border: none ! important;
}
iframe {
border: 2px inset;
}
noframes {
display: none;
}
spacer {
position: static ! important;
float: none ! important;
}
canvas {
-moz-user-select: none;
}
/* focusable content: anything w/ tabindex >gt;=0 is focusable */
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus,
base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus,
center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus,
kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus,
object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus,
small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus,
table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus,
tr:focus, tt:focus, u:focus, ul:focus, var:focus {
/** start:Firefox2 **/
outline: 1px dotted invert;
/** end:Firefox2 **/
/** start:Firefox3 **/
/* Don't specify the outline-color, we should always use initial value. */
outline: 1px dotted;
/** end:Firefox3 **/
}
/* hidden elements */
area, base, basefont, head, meta, script, style, title,
noembed, param {
display: none;
}
/* emulation of non-standard HTML gt; tag */
marquee {
/** start:Firefox2 **/
display: block;
/** end:Firefox2 **/
/** start:Firefox3 **/
width: -moz-available;
display: inline-block;
vertical-align: text-bottom;
text-align: start;
/** end:Firefox3 **/
-moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal');
}
marquee[direction="up"], marquee[direction="down"] {
-moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical');
height: 200px;
}
/* PRINT ONLY rules follow */
@media print {
marquee { -moz-binding: none; }
/* XXX this should not be necessary, we should be stopping blinking
of any kind in print preview, not just the gt; element */
blink {
text-decoration: none;
}
}虽然CSS2.1的附录里给了HTML4默认样式的建议(Appendix D. Default style sheet for HTML 4)，这本身就不是一个很完美的解决方案，加上各个浏览器附加上一点自己私有的属性，Firefox默认样式表中清楚的说明了这点，导致了各个浏览器的默认样式表不尽相同，比如对比这份参考CSS2.1的对HTML4默认样式的建议通过实践总结出来的IE6的默认样式表(INTERNET EXPLORER 6 DEFAULT STYLE SHEET)。解决这个问题的常见方法就是通过一个通用的CSS文件来重置HTML标签的样式，使其在各个浏览器中表现的一样，比如YUI Reset CSS和Eric Meyer的CSS Tools: Reset CSS就是很好的解决方案。
扩展阅读：Really Undoing html.css - Eric Meyer
原文：http://www.cnblogs.com/yuzhongwusan/archive/2009/03/19/1416282.html
