每个浏览器都有内置的默认样式表。HTML会遵照该样式表显示网页。整体上,不同浏览器提供的默认样式表是相似的,但也存在一定的差异。为此,开发人员在应用他们自己的CSS 之前,常常需要抹平这些差异。抹平差异的方法主要有两种。
使用CSS重置(reset)样式表,如Eric Meyer创建的Meyer重置(http://meyerweb.com/eric/tools/css/reset/)。另外还有其他的一些重置样式表。
使用 Nicolas Gallagher 和 Jonathan Neal创建的normalize.css 开始主样式表。该样式表位于http://necolas.github.com/normalize.css/。
CSS重置可以有效地将所有默认样式都设为“零”。第二种方法,即normalize.css,则采取了不同的方式。它并非对所有样式进行重置,而是对默认样式进行微调,这样确保在不同的浏览器中具有相似的外观。
用户也可以保留浏览器的默认样式,并自己编写相应的CSS。如果确实要使用normalize.css 或CSS 重置,也不必保留它们提供的所有CSS。本例使用了normalize.css 中的一部分代码,并对文本添加了一些样式,形成一个初始的页面。
/* 在方向更改后防止iOS文本大小调整,而不禁用用户缩放 */ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* 删除默认边距*/ body { margin: 0; } /* ::: ::: */ /* 链接样式中,解决Chrome与其他浏览器之间的“outline”不一致问题 */ a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } /* 在所有浏览器中解决不一致和可变的字体大小 */ small { font-size: 80%; } /* 在IE 8/9中的a元素中删除边框 */ img { border: 0; }