HTML5与CSS3基础教程:抹平不同浏览器之间的样式差异

摘要:不同浏览器提供的默认样式表是相似的,但也存在一定的差异。为此,开发人员在应用他们自己的CSS之前,常常需要抹平这些差异。
作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)
第十一章全部章节:
第一节:用CSS布局及注意事项
第二节:构建(有利于搜索引擎索引的)页面
第三节:在旧版浏览器中为HTML5元素添加样式(让HTML5新元素兼容任何浏览器)

11.4 对默认样式进行重置或标准化

前面提到,每个浏览器都有内置的默认样式表。HTML会遵照该样式表显示,除非你自己编写的CSS覆盖了它们。整体上,不同浏览器提供的默认样式表是相似的,但也存在一定的差异。为此,开发人员在应用他们自己的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/(最新版本使用Download按钮)。

从上面合适的URL中复制CSS,并粘贴到你自己的样式表中。

CSS重置可以有效地将所有默认样式都设为“零”,如图11.4.1所示。第二种方法,即normalize.css,则采取了不同的方式。它并非对所有样式进行重置,而是对默认样式进行微调,这样它们在不同的浏览器中具有相似的外观,参见图11.4.2。(重要提醒:我删除了前面两个图中的大尺寸图像,以便你能看到更多文本,重置或者normalize.css都不会隐藏图像。)

并非一定要用到这两种方法中的一种。保留浏览器的默认样式,并自己编写相应的CSS也不错。

如果确实要使用normalize.css或CSS重置,也不一定要保留它们提供的所有CSS。它们的样式规则中,有一些所针对的HTML元素是你的网站并未使用的。这时,就不必在你的样式表中包含这些多余的CSS。

blob.png

图11.4.1:这是应用了重置的示例页面。最大的变化是所有的字体大小都变成一样的了,文本边框和列表样式没了,所有的外边距和内边距都设为了0

在本章中,我使用了normalize.css中的一部分代码(如图11.4.3所示),并对文本添加了一些样式,形成一个初始的页面。在根据本章的介绍继续添加样式之前,页面的样子如图11.4.4所示。可以通过www.htmlcssvqs.com/8ed/11找到图11.4.1、图11.4.2和图11.4.4对应的完整页面。 

blob.png

图11.4.2 这是使用了normalize.css(而不是重置)的示例页面。它与无样式的默认显示效果很相似,但也有差异。更重要的是,这个版本与使用当今常见的浏览器查看的效果是极为相似的

blob.png

图11.4.3:这是将normalize.css中本站不需要的样式规则移除后的一个版本

blob.png

图11.4.4:这是经过重置并定义好了文本格式后的示例页面的样子。在本章中,你将以此为起点对页面其余的样式进行定义