Firefox的默认样式表

作者:秦歌 来源:随网之舞 时间:2008-05-09 12:06:00 

每个浏览器都有自己的默认样式,这是一段预定义的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 *//*

虽然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

标签:CSS,Firefox,YUI
0
投稿

猜你喜欢

  • CSS背景 background 图像属性解读

    2008-08-01 18:19:00
  • 在FLASH中调用ASP的方法

    2009-03-09 18:32:00
  • ASP.NET 2.0中Gridview控件高级技巧图文教程

    2007-08-07 15:46:00
  • SQL Server中如何优化磁带备份设备性能

    2009-01-07 14:23:00
  • 惰性函数定义模式

    2007-09-26 20:56:00
  • 弹性+固宽布局

    2009-05-15 12:19:00
  • Access保留字和变量名列表

    2007-10-15 12:43:00
  • SQL根据时间范围条件查询数据

    2009-01-18 13:32:00
  • asp阻止中国ip访问访问

    2011-09-13 12:55:37
  • asp显示数据库中表名、字段名、字段内容

    2008-06-17 18:09:00
  • 下拉列表两级连动的新方法(一)

    2009-06-04 18:18:00
  • Access 2007简易入门手册

    2008-12-04 13:12:00
  • 网马解密大讲堂——网马解密中级篇(Freshow工具使用方法)

    2009-09-16 15:09:00
  • ASP UTF-8页面乱码+GB2312转UTF-8 +生成UTF-8格式的文件(编码)

    2011-04-19 11:15:00
  • 单击按钮将内容复制到剪贴板

    2008-08-22 13:08:00
  • FCKeditor 编辑器实战技巧 Ⅰ

    2008-10-08 10:22:00
  • CSS Border使用小分享

    2010-08-12 14:34:00
  • 几个常用的js小函数

    2007-09-19 12:59:00
  • 一个简单的像素画小工具

    2010-01-01 15:33:00
  • Asp.net实现简单的文字水印

    2007-08-24 09:28:00
  • asp之家 网络编程 m.aspxhome.com