CSS调试技巧五则，兼谈“提问的艺术”

CSS开始进入布局领域，并逐渐开始广泛地被使用，越来越多的设计师转向CSS，然而随着使用的逐步深入，会发现使用CSS的一个问题是，懂得越多，遇到的问题就越多。在实际制做网站的时候，总会遇到以前没有碰到过的新问题。就好像我们学了十几年的英语，单词、语法都背了一大堆，但是真到用的时候，还是总遇到不会说的东西。

实际上这还是学习途中的一个阶段，算是成长的烦恼。毕竟每解决一个问题，功力就会精进一层。因此，除了彻底把CSS的原理搞清楚之外，就要尽可能多地实践，解决实际问题，这样终归是可以把问题都解决的。

在实践中，最关键的问题就是如何调试，也就是在遇到页面表现和预想的不一样的时候，怎么找到问题的关键。当然，前提是你对你写的代码基本上是清楚的，否则谈不上调试。

对于CSS而言，本质就是大大小小的盒子在页面上摆放，你不是设计师，而是排字工人，你眼中看到的不是文字，不是图像，就是一堆盒子！你要考虑的就是盒子与盒子之间的关系！标准流？并列？上下？嵌套？间隔？背景？浮动？绝对？相对？定位基准？等等等等……

技巧1：设置背景色或者边框，确认错误范围

归根到底，任何排版上的错误，都是由于你认为某个盒子应该在的位置和浏览器认为的位置不同，所以如果你本身就是浏览器，一切错误都不会出现。

因此，每当你发现表现页面不如你意的时候，比如希望在左边跑到右边了，希望在一行的变成两行了等等，都首先明确每个盒子的范围，这时你可以通过临时给盒子设置背景色，或者设置一个1像素边框的方法，清楚地了解浏览器认为和盒子范围和你认为的盒子范围是否一致。如果可以设置背景色最好使用背景色，因为设置边框会改变布局，这就好像我们使用温度表测量温度，前提是认为温度表本身不会影响被测物体的温度，实际上物理学告诉我们，任何两个物体都是相互影响的，即所谓测不准原理。但有时对于复杂的页面，背景色可能无法看出范围，还是需要使用边框来完成这项任务，但你要排除增加的临时边框引入新的问题的可能性。

当某个盒子的范围不是你所希望的，恭喜你，你已经找到错误所在了，接下来就是分析为什么浏览器要把它放在这里，而不是按照你的意愿去放置？你经过这一步仔细计算，你的所有代码都是符合CSS规范的，那么你需要确认这是浏览器错了，而不是你错了。不过你应该相信，99%的可能是你粗心算错了，1%的可能是浏览器有错误。就好像你回忆一下，上学时参加过的所有考试，老师确实有时会把你答对的题目判错，但是这种概率很低。

技巧2：删除无关代码，暴露核心矛盾

经过上一步的排查，你已经怀疑浏览器有问题了，那么就需要确认这一点。而这时你的网页很可能很复杂，内容很多，各种因素互相影响，都会干扰你的判断。解决方法就是把仅和你有问题的部分相关的代码提取出来，或者把无关代码全部删除，总之目的就是尽可能找到出现问题的最小代码集合，这样你才能找到问题的本质原因。事实上，很多情况下，从一个复杂的网页一点点删除代码的过程中，你的问题就解决了，这样你一定要注意，删了哪些代码，你的问题就解决了，这就是问题的原因，如果你是个聪明人，一定要把这个问题真正搞懂，不要只管结果，不问为什么。遇事多问几个为什么，你的提高会快得多。

事实上，调试能力是非常重要的，任何人在实际工作中，肯定都会遇到做出来的效果和自己希望的不一致的情况，这时就要看调试能力了。

就好像，家里停电了，你一定会首先出门看看邻居家的是不是有电，这样就判断出问题出在自己家里，还是整个楼停电了。如果整个楼都停电了，那就只有等了；如果只是自己家停电了，那就要再分析一下是不是哪里短路了（比如水洒在电线上了），或者有什么电器过载了（比如你把家里的所有空调、热水器、电火锅这些东西都打开了），等等，这实际上就是在确定故障点，道理和作页面是完全类似的，第一步就是缩小范围，只是你可能没有意识到。因此，你可以把生活中的一些道理，移植过来，很多问题就好解决了。（如果一出问题，就找物业的人来修，应该是比较适合做领导的人，呵呵。）

技巧3：先用Firefox调试，然后使它兼容IE

关于Firefox和IE的差异问题，已经谈过很多了，这里不再细说，总之原则就是，Firefox对CSS规范遵守的最好，调试的时候先用Firefox调试，然后再使网页兼容IE；其次，不要在一种浏览器完全做好以后，再用浏览器调试，而是每一步都保证在各浏览器中这个正确显示。

技巧4：善于利用工具，提高调试效率

这里要说的是两个非常方便的工具，他们都是以Firefox的插件形式存在的，分别是“Web Developer Toobar”和“Firebug”。当然，他们都不能向傻瓜相机一样，只要按一下快门，就告诉你问题出在哪里。他们的作用都是可以帮助你尽可能方便地了解浏览器是如何看待你的代码的。比如，通过他们，可以方便地查看每一个盒子的范围，不需要你在人为地设置边框了，通过Firebug，可以实时动态地修改CSS属性设置，这都可以大大提高你调试的效率。这里暂时没有篇幅来讲解这两个工具的用法了，有兴趣的读者可以先查一查相关的介绍。

技巧5：善于提问，寻求帮助

互联网出现了，这个伟大的家伙给我们带来了太多的方便。有了Google，我们可以寻找答案，有了各种网站论坛，我们可以去向别人请教，这都是我们学习的最好途径。但是有一点，这也需要一些提问的技巧和艺术。这里给您的建议就是，在提问之前，一定要按照前面说的几点，自己亲自研究过你的问题，你的问题可以用一两句话很具体地说明，可以配有简洁的代码，使看到你的问题的人，可以很容易理解你的问题，并“重现”你的问题。这一点非常重要，千万不要把大段大段的代码，贴到某个论坛上，那样你得到帮助的机会会变得小得多。你要相信，热心人固然是很多的，但是热心到能够花很多时间一点点分析你的大段大段代码，然后大海捞针一样地找出某个地方存在问题的热心人就不多了。事实上，这些功课是你应该提前做好的，你至少应该尽可能缩小问题的范围，到一个合理的程度。互联网、Google、论坛都是工具，也仅仅是一个工具，谁能用得好，谁就能获得更快的提高，关键还是要看使用工具的主人。