每个浏览器都有自己的默认样式，这是一段预定义的CSS，用以简单地呈现网页。在Firefox中的地址栏中输入resource://gre/res/html.css即可以看到该浏览器的默认样式。在Firebug 1.2 Alphas的styles中就可以看到默认样式对页面定义样式的影响。毫无疑问，理解和学习浏览器的默认样式能更好的理解浏览器对解析样式和呈现页面。Firefox3和Firefox2相比，默认样式仅有8处不同，但这些改变也可以让我们感觉到Firefox3在样式上的改进：
1@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ /* bidi */ [dir="rtl"] { 2 direction: rtl; 3 unicode-bidi: embed; 4} 5[dir="ltr"] { 6 direction: ltr; 7 unicode-bidi: embed; 8} 9bdo[dir] { 10 unicode-bidi: bidi-override; 11} /* blocks */ html, div, map, dt, isindex, form { 12 display: block; 13} 14 15body { 16 display: block; 17 margin: 8px; 18} 19 20p, dl, multicol { 21 display: block; 22 margin: 1em 0; 23} 24 25dd { 26 display: block; 27 -moz-margin-start: 40px; 28} 29 30blockquote { 31 display: block; 32 margin: 1em 40px; 33} 34 35address { 36 display: block; 37 font-style: italic; 38} 39 40center { 41 display: block; 42 text-align: -moz-center; 43} 44 45blockquote[type=cite] { 46 display: block; 47 margin: 1em 0px; /*** start:Firefox2 ***/ padding-left: 1em; 48 border-left: solid; /*** end:Firefox2 ***/ /*** start:Firefox3 ***/ -moz-padding-start: 1em; 49 -moz-border-start: solid; /*** end:Firefox3 ***/ border-color: blue; 50 border-width: thin; 51} 52 53span[_moz_quote=true] { 54 color: blue; 55} 56 57pre[_moz_quote=true] { 58 color: blue; 59} 60 61h1 { 62 display: block; 63 font-size: 2em; 64 font-weight: bold; 65 margin: .67em 0; 66} 67 68h2 { 69 display: block; 70 font-size: 1.5em; 71 font-weight: bold; 72 margin: .83em 0; 73} 74 75h3 { 76 display: block; 77 font-size: 1.17em; 78 font-weight: bold; 79 margin: 1em 0; 80} 81 82h4 { 83 display: block; 84 font-weight: bold; 85 margin: 1.33em 0; 86} 87 88h5 { 89 display: block; 90 font-size: 0.83em; 91 font-weight: bold; 92 margin: 1.67em 0; 93} 94 95h6 { 96 display: block; 97 font-size: 0.67em; 98 font-weight: bold; 99 margin: 2.33em 0; 100} 101 102listing { 103 display: block; 104 font-family: -moz-fixed; 105 font-size: medium; 106 white-space: pre; 107 margin: 1em 0; 108} 109 110xmp, pre, plaintext { 111 display: block; 112 font-family: -moz-fixed; 113 white-space: pre; 114 margin: 1em 0; 115} /* tables */ table { 116 display: table; 117 border-spacing: 2px; 118 border-collapse: separate; 119 margin-top: 0; 120 margin-bottom: 0; /* XXXldb do we want this if we're border-collapse:collapse ? */ -moz-box-sizing: border-box; 121 text-indent: 0; 122} 123 124table[align="left"] { 125 float: left; 126} 127 128table[align="right"] { 129 float: right; 130 text-align: start; 131} 132 133table[rules]:not([rules="none"]) { 134 border-collapse: collapse; 135} /* caption inherits from table not table-outer */ caption { 136 display: table-caption; 137 text-align: center; 138 -moz-box-sizing: border-box; 139} 140 141table[align="center"] >gt; caption { 142 margin-left: auto; 143 margin-right: auto; 144} 145 146table[align="center"] >gt; caption[align="left"] { 147 margin-right: 0; 148} 149 150table[align="center"] >gt; caption[align="right"] { 151 margin-left: 0; 152} 153 154tr { 155 display: table-row; 156 vertical-align: inherit; 157} 158 159col { 160 display: table-column; 161} 162 163colgroup { 164 display: table-column-group; 165} 166 167tbody { 168 display: table-row-group; 169 vertical-align: middle; 170} 171 172thead { 173 display: table-header-group; 174 vertical-align: middle; 175} 176 177tfoot { 178 display: table-footer-group; 179 vertical-align: middle; 180} /* for XHTML tables without tbody */ table >gt; tr { 181 vertical-align: middle; 182} 183 184td { 185 display: table-cell; 186 vertical-align: inherit; 187 text-align: inherit; 188 padding: 1px; 189} 190 191th { 192 display: table-cell; 193 vertical-align: inherit; 194 font-weight: bold; 195 padding: 1px; 196} 197 198tr >gt; form:-moz-is-html, tbody >gt; form:-moz-is-html, 199thead >gt; form:-moz-is-html, tfoot >gt; form:-moz-is-html, 200table >gt; form:-moz-is-html { /* Important: don't show these forms in HTML */ display: none !important; 201} /* inlines */ q:before { 202 content: open-quote; 203} 204 205q:after { 206 content: close-quote; 207} 208 209b, strong { 210 font-weight: bolder; 211} 212 213i, cite, em, var, dfn { 214 font-style: italic; 215} 216 217tt, code, kbd, samp { 218 font-family: -moz-fixed; 219} 220 221u, ins { 222 text-decoration: underline; 223} 224 225s, strike, del { 226 text-decoration: line-through; 227} 228 229blink { 230 text-decoration: blink; 231} 232 233big { 234 font-size: larger; 235} 236 237small { 238 font-size: smaller; 239} 240 241sub { 242 vertical-align: sub; 243 font-size: smaller; 244 line-height: normal; 245} 246 247sup { 248 vertical-align: super; 249 font-size: smaller; 250 line-height: normal; 251} 252 253nobr { 254 white-space: nowrap; 255} /* titles */ abbr[title], acronym[title] { 256 border-bottom: dotted 1px; 257} /* lists */ ul, menu, dir { 258 display: block; 259 list-style-type: disc; 260 margin: 1em 0; 261 -moz-padding-start: 40px; 262} 263 264ol { 265 display: block; 266 list-style-type: decimal; 267 margin: 1em 0; 268 -moz-padding-start: 40px; 269} 270 271li { 272 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, 273ol ul, ol ol, ol dir, ol menu, ol dl, 274dir ul, dir ol, dir dir, dir menu, dir dl, 275menu ul, menu ol, menu dir, menu menu, menu dl, 276dl ul, dl ol, dl dir, dl menu, dl dl { 277 margin-top: 0; 278 margin-bottom: 0; 279} /* 2 deep unordered lists use a circle */ ol ul, ul ul, menu ul, dir ul, 280ol menu, ul menu, menu menu, dir menu, 281ol dir, ul dir, menu dir, dir dir { 282 list-style-type: circle; 283} /* 3 deep (or more) unordered lists use a square */ ol ol ul, ol ul ul, ol menu ul, ol dir ul, 284ol ol menu, ol ul menu, ol menu menu, ol dir menu, 285ol ol dir, ol ul dir, ol menu dir, ol dir dir, 286ul ol ul, ul ul ul, ul menu ul, ul dir ul, 287ul ol menu, ul ul menu, ul menu menu, ul dir menu, 288ul ol dir, ul ul dir, ul menu dir, ul dir dir, 289menu ol ul, menu ul ul, menu menu ul, menu dir ul, 290menu ol menu, menu ul menu, menu menu menu, menu dir menu, 291menu ol dir, menu ul dir, menu menu dir, menu dir dir, 292dir ol ul, dir ul ul, dir menu ul, dir dir ul, 293dir ol menu, dir ul menu, dir menu menu, dir dir menu, 294dir ol dir, dir ul dir, dir menu dir, dir dir dir { 295 list-style-type: square; 296} /* leafs */ /* gt; noshade and color attributes are handled completely by 297 * the nsHTMLHRElement attribute mapping code 298 */ hr { 299 display: block; 300 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; 301 -moz-box-sizing: border-box; 302} 303 304hr[size="1"] { /** start:Firefox2 **/ border-style: -moz-bg-solid none none none; /** end:Firefox2 **/ /** start:Firefox3 **/ border-style: solid none none none; /** end:Firefox3 **/ } 305 306*|*:-moz-any-link img, img[usemap], object[usemap] { 307 border: 2px solid; 308} /** start:Firefox3 **/ img:-moz-broken::before, input:-moz-broken::before, 309img:-moz-user-disabled::before, input:-moz-user-disabled::before, 310img:-moz-loading::before, input:-moz-loading::before, 311applet:-moz-empty-except-children-with-localname(param):-moz-broken::before, 312applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before { 313 content: -moz-alt-content !important; 314 unicode-bidi: embed; 315} 316 317object:-moz-broken >gt; *|*, applet:-moz-broken >gt; *|* 318object:-moz-user-disabled >gt; *|*, applet:-moz-user-disabled >gt; *|* { /* 319 Inherit in the object's alignment so that if we aren't aligned explicitly 320 we'll end up in the right place vertically. See bug 36997. Note that this 321 is not !important because we _might_ be aligned explicitly. 322 */ vertical-align: inherit; 323} 324 325img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed, 326embed:-moz-suppressed, applet:-moz-suppressed { /* 327 Set visibility too in case the page changes display. Note that we _may_ 328 want to just set visibility and not display, in general, if we find that 329 display:none breaks too many layouts. And if we decide we really do want 330 people to be able to right-click blocked images, etc, we need to set 331 neither one, and hack the painting code.... : ( 332 */ display: none !important; 333 visibility: hidden !important; 334} /** end:Firefox3 **/ img[usemap], object[usemap] { 335 color: blue; 336} 337 338frameset { 339 display: block ! important; 340 overflow: -moz-hidden-unscrollable; 341 position: static ! important; 342 float: none ! important; 343 border: none ! important; 344} 345 346frame { 347 border: none ! important; 348} 349 350iframe { 351 border: 2px inset; 352} 353 354noframes { 355 display: none; 356} 357 358spacer { 359 position: static ! important; 360 float: none ! important; 361} 362 363canvas { 364 -moz-user-select: none; 365} /* focusable content: anything w/ tabindex >gt;=0 is focusable */ abbr:focus, acronym:focus, address:focus, applet:focus, b:focus, 366base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus, 367center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus, 368del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus, 369fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus, 370h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus, 371kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus, 372object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus, 373small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus, 374table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus, 375tr: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, 376noembed, param { 377 display: none; 378} /* emulation of non-standard HTML gt; tag */ marquee { /** start:Firefox2 **/ display: block; /** end:Firefox2 **/ /** start:Firefox3 **/ width: -moz-available; 379 display: inline-block; 380 vertical-align: text-bottom; 381 text-align: start; /** end:Firefox3 **/ -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal'); 382} 383 384marquee[direction="up"], marquee[direction="down"] { 385 -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical'); 386 height: 200px; 387} /* PRINT ONLY rules follow */ @media print { 388 389 marquee { -moz-binding: none; } /* XXX this should not be necessary, we should be stopping blinking 390 of any kind in print preview, not just the gt; element */ blink { 391 text-decoration: none; 392 } 393 394}
虽然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
- 作者：随网之舞
- 原文：Firefox的默认样式表