消除浏览器样式冲突

Eliminating Browser Style Interference

当你在网页浏览器上观看一个非CSS型的网页时，HTML标签已经有了一些最少限度的格式：标题是粗体的、<h1>标签比其他文本更大、链接有下画线并且为蓝色，等等。在有些情况下，不同的网页浏览器应给这些元素用稍微不同的格式。

你可能经历过一些挫败——“它在Internet Explorer上和在Firefox以及Safari上看起来几乎一样”——的时刻。

高级用户的诊所

Web Developer's Toolbar

网页设计师们不得不掌握许多东西：HTML、CSS、链接、图片、表格，等等。利用这些项目中的任何一种来解决问题，有时候可能是个真正的挑战。Web Developer’s Toolbar（http://chri- spederick.com/work/webdeveloper/）由Chris Pederick创建，是个Firefox的扩展，就像网页设计的一把瑞士军刀（见图14-4）。如果你没有Firefox，应该单独给这个工具条安装Firefox（www.moailla.com/firefox）。

下载、安装这个扩展，并花点时间看看不同的选项。你有许多可用的特性，但以下是值得关注的几种：

^●选择CSS → View CSS，你会看到当前页面的所有样式，甚至从多个样式表中导入的样式。如果你已经访问过一个网站，并想知道“它们是如何做到的？”时，这个工具就给你提供了一次免费的重返之旅。

^●选择CSS → Edit CSS，你可以编辑当前网页的样式。这不会给真实的网页造成任何永久的伤害，但是它会让你找出一张网页的样式，并立即看到结果。把它当成最终的所见即所得（WYSIWYG）的编辑器吧。

^●Information菜单提供了大量具体、通常令人讨厌的深入实质的细节。Display Block Size选项显示了块级元素例如表格和div的尺寸。Display Element Information提供了关于鼠标经过的任何元素的信息（包括HTML属性、CSS属性以及它在网页中的位置）。Display Id & Class Details是看到应用到网页标签的样式名称的一种好办法。用它看看其他网站是如何命名它们的<div>标签的。

^●Tools菜单让你访问验证HTML和CSS的在线工具，甚至检查链接。这些工具只对在线页面起作用，而不是对正在你的计算机上进行的页面。

Microsoft给Internet Explorer提供了一种类似的工具。你可以通过访问www.microsoft.com，并在搜索框中键入IE Developer Toolbar来找到它。

注意：Firefox实际上使用了一个CSS样式表来格式化HTML标签。要在Mac上观看，就要找到Firefox应用文件，直接点击它，然后选择“Show package contents。”然后导航到Contents→MacOS→res，并在文本编辑程序中打开html.css文件。在Windows中，你将在C:\Program Files\Mozilla Firefox\res\ html.css上找到这个文件。如你所见，它用了许多样式，使得规则的HTML看起来令人厌烦。

由于这些浏览器的差别，给常用标签的格式“归零”是个好主意，以便访问者可以看到你如此辛苦建立起来的漂亮样式（见图14-5）。你所要做的就是在去除讨厌格式的样式表开头处，建立一些基本的样式。

这是阻止浏览器干涉你设计可能要做的一些事情：

去除padding和margin。浏览器给大部分块级元素增加了上边距和底边距——例如显示在<p>标签之间常见的空格。这可能导致一些奇怪的显示问题，比如精确的边距量被不一致地应用给各个浏览器。一种更好的办法是从你用的块级标签中去除padding和margin，然后通过创建新样式，有目的地添加你要的量。

应用一致的字号。虽然一个<p>标签里面的文本以1em显示，但是网页浏览器应用了不同的字号给其他标签。你可以强制所有标签以1em开始，然后给不同的标签创建另外的带有指定字号的样式。这样，你更有机会在各浏览器上获得一致的字号。

从链接上去除下画线。如第9章介绍的，你可以用平淡无奇的旧文本链接创建令视觉兴奋的导航栏。事实上，如果你网站上的大部分链接看起来更像按钮，或者你使用其他格式来显示一个元素的可点击性（可能通过添加hover

效果），那么从消除下画线开始。你可以稍后选择性地在你需要它们的时候添加下画线。（请见第394页上的“使用派生选择器”。）

从链接图片上去除边框。Internet Explorer、Firefox和其他浏览器在链接里面的所有图片周围添加了一条彩色的边框。如果你和大多数人一样，会发现这条边框既不好看也没必要。去掉它并刷新。

为了把这些想法付诸行动，这里有一些你可以添加在样式表开头处的一些基本的样式：

body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {

padding: 0;

margin: 0;

}

h1, h2, h3, h4, h5, h6, pre, code {

font-size: 1em;

}

a {

text-decoration: none;

}

a img {

border: none;

}

这里的前两个样式是群选择器，应用相同的格式给所列的每一个标签。在样式表的开头处添加这些样式，然后在样式表更下方处，根据情况覆盖它们。在给<h1>标签的margin和font-size归零之后，你可能要给这个<h1>标签一个指定的top margin值和font size。只要添加另一个样式，像这样：

h1 {

margin-top: 5px;

font-size: 2.5em;

}

由于层叠，只要这个h1样式在样式表中出现在群选择器之后，消除margin并改变font size，那么这个新值就会优先。

注意：网站导师Tantek Celic以介绍取消HTML标准的网页浏览器格式的非常有用的方法而著称。你可以在http://tantek.com/log/2004/undohtml.css看到他一组基础的取消（undo）样式。