1、模块确认法

有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。
2、样式排除法
有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。
对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

3、检查页面的标签是否闭合
不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。
快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。

4、检查 IE 下是否触发 haslayout
很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读蓝色上的转帖 ）

快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。

5、检查是否清除浮动
其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。

6、边框背景调试法
故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^

1， 阴影效果.
通过使用带有一些padding之的背景图来添加阴影效果。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/dropshadow.htm
HTML：
<img class=”shadow” src=”sample.jpg” alt=”” />

CSS：
img.shadow {
            background: url(shadow-1000×1000.gif) no-repeat right bottom;
            padding: 5px 10px 10px 5px;
}

2，双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm

HTML：
<img src=”sample.jpg” alt=”" />

CSS：
img.double-border {
    border: 5px solid #ddd;
    padding: 5px; /*Inner border size*/
    background: #fff; /*Inner border color*/
}

3，图片外框效果
webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考这篇教程。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/framed.htm

HTML：
<div>
    <span> </span>
    <img src=”sample.jpg” alt=”" />
</div>

CSS：
.frame-block {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.frame-block span {
    background: url(frame.png) no-repeat center top;
    height:335px;
    width: 575px;
    display: block;
    position: absolute;
}

4，水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/watermark.htm

HTML：
<div>
    <img src=”sample.jpg” alt=”" />
</div>

CSS：
.transp-block {
    background: #000 url(watermark.jpg) no-repeat;
    width: 575px;
    height: 335px;
}
img.transparent {
    filter:alpha(opacity=75);
    opacity:.75;
}

5，为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/caption.htm

HTML：
<div>
    <img src=”sample.jpg” alt=”" />
    <cite>Salone del mobile Milano, April 2008 – Peeta</cite>
</div>

CSS：
.img-desc {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.img-desc cite {
    background: #111;
    filter:alpha(opacity=55);
    opacity:.55;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 555px;
    padding: 10px;
    border-top: 1px solid #999;
}

#test{
    color:#FF0;voice-family: “\”}\”";voice-family:inherit;            /* ie5.5 */
    color:#000;                                                                           /* firefox and opera */
    color:#F00\0;                                                                        /* ie8 */
    [color:#f00;color:#999;                                                        /* chrome and safari */
    *color:#00F;                                                                         /* ie7 */
    _color:#0F0;                                                                         /* ie6 */
}

虽然使用css hack无法通过w3c验证，但是有时候不得不用。大师2曾经说过，有时候同步通过w3c验证不重要，只要自己心里明白就行了。

         在开始之前先需要明确下何为轻设计。这里并不想给轻设计下一个专业的定义，只是归纳了大家对轻设计所应具有的特性的理解。
　　具有灵敏的可交互元素：页面上的链接、文本框、按钮等可交互元素能灵敏地响应操作并即时反馈。
　　轻便的流程和提示，不打断用户的当前任务：一项任务尽量用少而清晰的步骤去完成，提示和临时任务尽量不中断用户主任务，不要让用户做不必要的确认和操作。
　　不干扰用户的注意力：用户是来使用产品和服务的，而不是来欣赏精美的设计，如果使用过程中会因为设计元素分散注意力那么可能是设计太重了。试着少用些无用的装饰和细节。

灵活的logo响应区
　　点击网站的logo通常能将我们带回到首页。从这个角度看，Logo不仅起着品牌标识的作用，还承担了重要的导航功能。就连普通的链接当在鼠标划过时都有下划线或者变色提示，那么logo作为一个更为重要的可交互元素，是否也应该在鼠标划过时提供适当的反馈呢？
　　下面列举了几个logo区灵活响应鼠标例子，在使用过程中发现，小小的变化不仅提升了可用性，还让网站显得灵敏而有生气。

这是我网站的头部logo，当鼠标悬停时，图片效果会从上面的效果切换到下面的效果，给人一种字体发出神秘光芒的感觉，而效果的实现要应用到css精灵（css sprite）
。

部分代码：

#logo a { background:url(images/logo.gif) no-repeat;width:246px;height:62px; display:block;}
#logo a:hover { background-position:0 -62px;}

将两张246×62的logo图片上下合并，成为一张图片。当鼠标悬停时定位到坐标0 -62px位置。这样做的好处是只用请求一次服务器，就能够下载到两种状态的图片，当鼠标悬停至logo区域是，第二张背景图片已经下载完成了，所以可以立即显示，如果不使用css sprite，当鼠标悬停至logo区域时，要重新发送一次http请求，要求下载另外一张logo图片，这是需要一定时间的。效果当然也会很差劲，从而无法灵敏地响应操作。

在进行CSS网页布局时遇到BUG，请认真阅读以下内容，非常容易记忆的，不知道哪位高人把CSS BUG编成了顺口溜了！看看好不好记住呢？

　　一、IE边框若显若无，须注意，定是高度设置已忘记；

　　二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

　　三、三像素文本慢移不必慌，高度设置帮你忙；

　　四、兼容各个浏览须注意，默认设置行高可能是杀手；

　　五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

　　六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。

　　七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。

　　八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。

　　九、IE浮动双边距，请用display：inline拘。

　　十、列表横向排版，列表代码须紧靠，空隙自消须铭记。

1. 样式表索引样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本。
   • 给出该css文件作者的相关信息
   • 定义站点的布局（几栏，静态布局/动态布局）
   • 记录文件版本号（利于多作者协作及将来更新）
   样式表索引 
2. 命名锚点命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。（描述的可能不清晰，看下面图应该就明白了） 
   命名锚点定义及查找 
3. 避免多余Class定义很多人（尤其是新手）在书写CSS中会定义不必要的Class来样式化一些元素。其实CSS的一个优雅之处在于它的上下文选择符（即子选择器和相邻同胞选择器），如下： 
   避免多余Class定义 
4. 合适的命名为class定义一个准确清晰的类名十分关键，它有助于你更好更快的理解CSS定义，不至于混淆。 
   合适的命名 
5. 缩写在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。CSS缩写会使CSS文档更加干净、简洁。下面是几个例子： 
   CSS缩写 
6. CSS图像拼合(即CSS Sprites技术)CSS Sprites技术：将用到的所有背景图片合并为一张图片，使用css背景属性，来控制图片的显示位置和方式。CSS Sprites技术的应用可以大大减少HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。 苹果官方网站的菜单设计是CSS Sprites技术应用非常好的案例： 
   CSS Sprites 
7. 特殊性即使在不太复杂的样式表中，也可能有两个或更多规则寻找同一元素，CSS通过选择符特殊性来决定规则的次序。简而言之，每个CSS选择符都会分配一个权重。将规则的每个选择器的值加在一起，就可以计算出规则的特殊性。CSS特殊性的使用在大型CSS文件中会很有帮助。 CSS特殊性在CSS中是比较大的一块内容，很难用几句话描述清楚，下面是几个示例： 
   CSS 特殊性 
8. CSS Reset(CSS重置，偶个人叫它CSS初始化)CSS Reset用于确保网站在不同浏览器中能够获得相同的展示效果。不同的浏览器有一套自己的初始默认设置，最终导致不同的UI展现。CSS重置就是用来解决这个问题，使你能在不同浏览器展现一致的基础上构建站点。我们可能不会要求你一定去使用某个CSS框架，但是希望能书写CSS Reset。我们可以在网上找到不少书写好的CSS Reset样例。 
   CSS Reset 
9. CSS Hacks可以说再完美的CSS也无法在所有浏览器中获得一致的展现，这是因为不同的浏览器给予你的CSS不同的解释。如果想要网站在不同的浏览器显示一致，你不得不使用CSS Hacks。 
   CSS Hacks 

   不过使用CSS Hack往往会导致CSS验证出现错误，一个替代的解决方案是为不同的浏览器书写不同的CSS，然后在html中使用条件语句引用它们。 

10. CSS验证当你书写完一个CSS文件，对它进行验证是十分必要的。它可以确保书写的CSS没有错误，并且在所有浏览器中正确的展示。W3C网站验证是用来验证CSS的常用工具。 
    CSS验证 

注： 

• 本文原文地址：http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices
• 摘自：http://css9.net/css-writestandards-best-practices/

分块书写代码
这样书写代码可以让CSS更页面化，在出现问题时候可以最短时间内找到问题所在。就像下面这样：
#content {float:left;}
　　#content p { … }
　　#sidebar {float:left;}
　　#sidebar p { … }
　　#footer {clear:both;}
　　#sidebar p { … }
浏览器支持

　　只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话，只需要很少的Hack就能实现同样的效果。

　　我注意了一下网易新版主页的CSS，其中竟然一个!important或者Hack都没有，可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然，调试的时间会多一些。

　　包含浮动元素所有在容器内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。

　　理解Overflow如果页面中有两个浮动元素，在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding设置混乱了，不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。

　　允许块元素自动填充空白

　　缩写CSS

　　很多人都margin-top、margin-right、margin-bottom、margin-left的用上一堆。其实这是最基本的，margin可以直接简写为margin:上 右 下 左值。可以在这里看到CSS缩写的总结。

　　避免不必要的选择器

　　把样式的选择器减少到最少。如果你发现自己不停的写ul li {}或者table tr td{}就证明写的过于详细了。更少的选择器会让你更容易的发现问题。

我在前面的文章中曾经介绍过许多使用的在线优化css的网站，这些工具能够很好的对css文件进行批量格式化，使得css文件的可读性与css文件的大小成反比。也就是说优化后的代码将完全是混乱的，可读性非常差，但是体积很小。不利于后期的维护。

其实优化CSS文件非常简单，只要我们在网站完成之后把CSS文件做下规整，在编写的时候注意下一些比较常用的缩写方法，养成良好的习惯，你也可以让你的CSS文件做到真正的优化。

当属性值为0时
书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:
padding: 10px 5px 0px 0px;

试试这样吧:
padding: 10px 5px 0 0;

移除选择器
选择器是你在为一些元素应用CSS样式时的基本方法，比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。

div#logowrap

尝试扔掉多余的选择器吧:
#logowrap

在这个例子中所谓的那个选择器就是div

学会使用万能通配符*
要明智的使用*而避免它在整个CSS样式表中乱开玩笑，*是个通配符，你可以使用它来为你的设计部分或全部进行一系列CSS声明。例如:

* {
margin: 0;
}

这个声明会将所有元素的margin值设置为0，同样的，为了严谨起见，你可以尝试这样设置:
#menu * {
margin: 0;
}

这样的声明是指将#menu下的所有元素的margin设为0。

背景的缩写方法
背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成:
background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;

其实可以缩写成:
background: url(logo.png) no-repeat top center;

颜色
颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数字，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。

#000000 可以写成 #000, #336699 可以写成 #369

这种简写技巧只适用于成对出现的颜色值（即奇数位色值和偶数位色值相同时），其它颜色值不适用这种技巧，比如:
#010101, #223345, #FFF000

Margin(外边距/空白边)的缩写
声明CSS magin值得时候通常会写成这样:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;

让我们试试把值为0的单位去掉，并把4条声明合并成一条声明:
margin:0 10px 0 10px;    注：上 右 下 左 是这样的顺序

当你声名padding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右:
margin:0 10px;

它是指左右的值为10px，上下的值为0；Padding(内边距)padding的简写技巧等同于margin:

padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;

可以写成:
padding: 0 10px;             

Border(边框)边框的缩写
border缩写的方式相比其它声明来说会比较复杂，很多CSSer一开始都容易记混它的简写顺序，如果你想声明一个1像素宽的实线黑色边框，可能会写成:
border-width:1px;
border-style:solid;
border-color:#000;

其实可以写成:
border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。我们还可以为四个边设置不同的宽度:
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

可以简写成:
border-width:1px 2px 3px 4px;

最后，我们还可以只设置右和下边框的样式:
border-right:1px solid #000;
border-bottom:1px solid #000;

文字属性的缩写
文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:150%;
font-family:宋体, Arial, sans-serif;

其实可以优化成一行:
font:italic small-caps bold 1em/150% 宋体, Arial, sans-serif;

列表的缩写
list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);

可以写成:
list-style:square inside url(filename.gif);

再给大家举个综合的例子，请看下面的CSS代码：
.sample1 {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 12px;
margin-left: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 8px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
}

将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：
.sample1 {
margin: 15px 20px 12px 24px;
padding: 5px 10px 4px 8px;
border-top: thin solid #000;
}

下面是CSS缩写性质的列表以及它们所表示的常规性质。

• Background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
• Border（边框）：边框颜色、边框风格、边框宽度
• border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
• border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
• border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
• border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
• cue（声音提示）：前提示、后提示
• font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
• list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
• margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
• outline（大纲）：大纲颜色、大纲样式、大纲宽度
• padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
• pause（暂停）：后暂停、前暂停