常见的CSS问题给出“一站式”的解决方案

牢记“LoVe/HAte（爱/恨）”链接规则

在为链接元素指定伪类时，牢记以下的顺序：link,visited,hover和active。任何其他的声明顺序都可能会导致问题。若是还要考虑:focus伪类，那么可将规则修改为LVHFA(可以用Matt Haughey给的记忆法"Lord Vader's Handle Formerly Anakin"记住这个顺序).

为非零值标明单位

在用CSS指定字体、边距或元素尺寸的值时，必须标明所用的单位（唯一的例外是line-height属性，虽然我们也可以为其指定单位，但这并不是必须的）。某些浏览器对未标明单位值的处理方法不足为凭，我们不能认为其他浏览器也会这样做。零就是零，没有必要分辨是px还是em。但非零值却一定要标明计量单位。例如：paddin:0 2px 0 1em;

测试不同的字体大小

无论在指定字体原始大小时使用了什么单位，Mozilla 和Opera之类的高级浏览器都允许用户调整字体大小。肯定会有一些用户所使用字体大小与我们的不同，所以在声明字体大小时，我们就应该尽量考虑到这些可能出现的变化。

在HTML和CSS中统一大小写

在大多数浏览器中，CSS都是大小写敏感的。若是CSS和HTML中都使用了同样的homePage做为某Class的名称，则自然良好工作。但若在CSS中将该规则改为“homepage”，那么在一些严格遵守CSS规范的用户代理（例如Mozilla浏览器）中就会问题。

测试时使用嵌入样式，发布时再改为外输入

若在测试时将样式表嵌入到HTML源代码中的<style>标签中，即可避免许多因浏览器缓存导致的不正确现象。对于某些较老的浏览器来讲，这一点至关重要。但在发布前，记住一定要将这些样式移至外部文件，然后用@import 或 <link>引入，否则将无法得到外部CSS带来的好处。

用明显的边框辅助调试布局

* {border: solid 1px #f00;}之类的全局规则可以帮助检查出很多细微的布局差错。内容来自中国站长资讯网(www.chinahtml.com)为某个特定的元素加上边框也便于找到一些难以发觉的元素重叠或多余空白问题。

指定图片路径时不要使用单引号

设置背景图片时的引号并不是必须的。不但如此，若用单引呈给出图片路径，那么苹果机上的IE将无法正确加载图像。因此要么使用双引号，要么根本不用任何引号。

若使用了锚点（anchor），那么在为超链接应用样式时要格外小心

如果代码中使用了传统的锚点（例如<a name="anchor">） ，将发现:hover 和 :active伪类的样式也会应用于其上。我们可以使用独一无二的id（例如<div id="anchor">），或昌一种鲜为人知的奇怪语法:link:hover 和 :link:active来避免这种情况。请参考www.dbaron.org/css/1999/09/links.

不要未雨绸缪地链接至作为“占位符”的空样式表（例如手持设备或打印用样式表）

苹果机的IE5对空的样式表比较敏感，页面的加载时间将因此变长。因此，我们建议样式表中至少应该有一条规则（哪怕注释也好），或都干脆就不要链接。

理解问题

理解问题才是修复问题的关键，这或许是我们能够提供的最有用的一个建议。想要了解CSS而已中的常见问题别无它法，唯有时间为代价换来经验。

假设在Windows平台上的IE中发现某个浮动元素旁多出了3个像素的水平间距，且只有在该浏览器中才出现。如果并不知道这是IE在处理浮动元素时的一个缺陷，则可能会尝试使用负外边距值、相对定位或者为其他环绕元素应用一些CSS hack，以期弥合这个令人费解的间距。

但如果事先了解了Windows平台上的IE的这个独特的缺陷，即自动为某些浮动元素添加了3个像素的额外外边距，那么就不概要猜测并逐一尝试上述方法了。

尝试修复这类难以理解的缺陷所带来的别一个问题就是，之类缺陷是可以叠加的。如果已经在页面中添加了很多这样令人费解的补丁，那么整个页面结构将充满显示问题，再也无法稳定下来。内容来自中国站长资讯网(www.chinahtml.com)若是早先的问题都没有妥善解决的话，那么开发中随后的高工过程将变得更加举步维艰。

但如是提清楚了导致所遇到的某个缺陷的真实原因，那么除错的过程将会变得相当简单直观。“CSS Crib Sheet”只是一个开始，很多其他网站也都详细讨论了特定浏览器在呈现过程中的问题。这是一个开始，很多其它网站也都详细讨论了特定浏览器在呈现过程中的问题。这里我们强烈推荐从Position Is Everything (www.positioniseverything.net)网站开始接下来的学习。 （负责编辑：李亚）

内容导航

• 第1页：常见的CSS问题给出“一站式”的解决方案
• 第2页：常见的CSS问题给出“一站式”的解决方案(2)