调试时，先校验
在调试的时候，先由校验开始吧，HTML和CSS都要进行校验。许多问题都是由不规范代码引起的。
优先在先进的浏览器上调试
如果你刚开始就用对CSS支持不好的浏览器调试，那么你所编的CSS将会逐渐适应这种错误的处理。当你继续在更先进的浏览器中测试，一些你所不希望的内容就会出现了。最好还是首先在一个有很好标准兼容性的浏览器中运行，然后再把代码拿到老一点的浏览器中去测试。
确保您期望的效果确实存在
许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜) 或滚动条指定了样式，那么您就用了私有代码，除了IE之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，这样在不同的浏览器中很难达到一致的效果。
理解CSS的盒模型
为了获得一个元素的实际的宽度和高度，你需要用padding和border来增加它的 width或者height。
在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。
为了绕过这个问题, 你同样可以使用CSS hack来给不同的浏览器提供不同的值，或者你尽量避免在同一个元素中同时定义width和 padding或者width和border。
为非零的数值加上单位
CSS要求一些属性值（如width、height、font-size）必须要有单位。当属性值为0时是可以例外的。在那种情况下，没有单位也是必须的，因为0就是0，什么单位也都无所谓了。
例如： padding: 0 2px 0 1em;
理解漂浮物(float)
尽管漂浮物这个概念很难理解，但是它很重要，因为CSS中会频繁的使用它来布局。
PS.已添加《CSS float hack》作详解。
边距的合并(可用padding 或 border 来避免)
您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins，边距的合并可能就是问题的根源。
PS.可参考W3C学院提供的资料：
http://www.w3school.com.cn/css/css_margin_collapsing.asp
避免IE下未指定样式内容的闪烁(Flash of Unstyled Content,即FOUC)
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
原因大致为：
1，使用import方法导入样式表。
2，将样式表放在页面底部。
3，有几个样式表，放在html结构的不同位置。
原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用LINK标签将样式表放在文档HEAD中。
别指望 min-width 在IE中有用
IE不支持它，但是它将 width 当作 min-width，所以通过一些 IE 的过滤技巧(filtering)，可以实现同样的最终效果。
把CSS过滤器(filters)当作最后的手段
CSS 技巧和过滤器可以使您有选择地应用到（或者不应用到）某些元素。应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果，而不是动不动就使用过滤器。要将它当成走投无路时的救命手段，说到底就是一个兼容的策略。
不要把这里的filters和IE中的滤镜混淆。由于各个浏览器对CSS标准的支持程度不一，人们找到了许多技巧，将浏览器无法解释或错误解释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。
如果使用了锚点，在应用超链接样式时要特别小心
如果您在代码中使用了传统的锚点(<a name="anchor">)，您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形，你可以使用 id，或者使用鲜为人知的语法:
:link:hover, :link:active
“LoVe/HAte”
按照如下顺序为链接定义伪类：Link, Visited, Hover, Active。
“TRouBLed”(上、右、下、左)
当使用简写来定义margin、padding和border时, 他们的顺序是从上开始的顺时针方向: 上、右、下、左。
测试不同的字体大小
像Mozilla和Opera这样的高级浏览器允许对字体进行缩放，不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同，尽最大努力去满足他们。
用嵌入式测试，发布时移到外部
将样式表嵌入在你的HTML源代码中，在测试时可以消除许多缓存引起的错误，尤其是某些Mac下的浏览器。但在发布前，一定要记住将样式表移到外部文件，用@import或<link>引入。
加上明显的边框有利于布局调试
像 div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。
对图片路径不要用单引号
当设置背景图片时，要坚持用双引号。尽管看起来有些多余，但是如果不这么做，IE5/Mac会噎住。
以其功能给CLASS和ID命名，而非表现
如果你有一个CLASS名为.smallblue, 过后你决定用它来定位文本，使其为大号、红色，那么CLASS的名字就会被弄混淆的。最好能用名字来描述功能和结构，如.copyright和.important。
CSS是个敏感的东西
当HTML属性中的class和id与CSS一起使用时，那可就要小心了，必须做到一一对应。
检查你的ID
文档中一个元素只能使用一个id，且id必须唯一，而class可以被多个元素所共享。
使用合法的字符为 class 和 id 命名
Class 和 id 的名字只能由数字、字母和连字符组成，数字和连字符是不可以开头的。
正确的注释
CSS的注释是以/*开头，以*/结尾的:
/* This is a comment */
好好组织您的CSS文件
恰当地成块注释CSS，将相似的CSS选择符编为一组，养成一致的命名习惯和空白格式（为跨平台考虑，建议用空白字符而不是tab。）以及适当的次序。
网友评论