CSS调试技巧五则,兼谈提问的艺术.doc

CSS开始进入布局领域，并逐渐开始广泛地被使用，越来越多的设计师转向CSS，然而随着使用的逐步深入，会发现使用CSS的一个问题是，懂得越多，遇到的问题就越多。在实际制做网站的时候，总会遇到以前没有碰到过的新问题。就好像我们学了十几年的英语，单词、语法都背了一大堆，但是真到用的时候，还是总遇到不会说的东西。实际上这还是学习途中的一个阶段，算是成长的烦恼。毕竟每解决一个问题，功力就会精进一层。因此，除了彻底把CSS的原理搞清楚之外，就要尽可能多地实践，解决实际问题，这样终归是可以把问题都解决的。在实践中，最关键的问题就是如何调试，也就是在遇到页面表现和预想的不一样的时候，怎么找到问题的关键。当然，前提是你对你写的代码基本上是清楚的，否则谈不上调试。对于CSS而言，本质就是大大小小的盒子在页面上摆放，你不是设计师，而是排字工人，你眼中看到的不是文字，不是图像，就是一堆盒子！你要考虑的就是盒子与盒子之间的关系！标准流？并列？上下？嵌套？间隔？背景？浮动？绝对？相对？定位基准？等等等等技巧1：设置背景色或者边框，确认错误范围归根到底，任何排版上的错误，都是由于你认为某个盒子应该在的位置和浏览器认为的位置不同，所以如果你本身就是浏览器，一切错误都不会出现。因此，每当你发现表现页面不如你意的时候，比如希望在左边跑到右边了，希望在一行的变成两行了等等，都首先明确每个盒子的范围，这时你可以通过临时给盒子设置背景色，或者设置一个1像素边框的方法，清楚地了解浏览器认为和盒子范围和你认为的盒子范围是否一致。如果可以设置背景色最好使用背景色，因为设置边框会改变布局，这就好像我们使用温度表测量温度，前提是认为温度表本身不会影响被测物体的温度，实际上物理学告诉我们，任何两个物体都是相互影响的，即所谓测不准原理。但有时对于复杂的页面，背景色可能无法看出范围，还是需要使用边框来完成这项任务，但你要排除增加的临时边框引入新的问题的可能性。当某个盒子的范围不是你所希望的，恭喜你，你已经找到错误所在了，接下来就是分析为什么浏览器要把它放在这里，而不是按照你的意愿去放置？你经过这一步仔细计算，你的所有代码都是符合CSS规范的，那么你需要确认这是浏览器错了，而不是你错了。不过你应该相信，99%的可能是你粗心算错了，1%的可能是浏览器有错误。就好像你回忆一下，上学时参加过的所有考试，老师确实有时会把你答对的题目判错，但是这种概率很低。技巧2：删除无关代码，暴露核心矛盾经过上一步的排查，你已经怀疑浏览器有问题了，那么就需要确认这一点。而这时你的网页很可能很复杂，内容很多，各种因素互相影响，都会干扰你的判断。解决方法就是把仅和你有问题的部分相关的代码提取出来，或者把无关代码全部删除，总之目的就是尽可能找到出现问题的最小代码集合，这样你才能找到问题的本质原因。事实上，很多情况下，从一个复杂的网页一点点删除代码的过程中，你的问题就解决了，这样你一定要注意，删了哪些代码，你的问题就解决了，这就是问题的原因，如果你是个聪明人，一定要把这个问题真正搞懂，不要只管结果，不问为什么。遇事多问几个为什么，你的提高会快得多。事实上，调试能力是非常重要的，任何人在实际工作中，肯定都会遇到做出来的效果和自己希望的不一致的情况，这时就要看调试能力了。就好像，家里停电了，你一定会首先出门看看邻居家的是不是有电，这样就判断出问题出在自己家里，还是整个楼停电了。如果整个楼都停电了，那就只有等了；如果只是自己家停电了，那就要再分析一下是不是哪里短路了（比如水洒在电线上了），或者有什么电器过载了（比如你把家里的所有空调、热水器、电火锅这些东西都打开了），等等，这实际上就是在确定故障点，道理和作页面是完全类似的，第一步就是缩小范围，只是你可能没有意识到。因此，你可以把生活中的一些道理，移植过来，很多问题就好解决了。（如果一出问题，就找物业的人来修，应该是比较适合做领导的人，呵呵。）技巧3：先用Firefox调试，然后使它兼容IE关于Firefox和IE的差异问题，已经谈过很多了，读者的问题是：“我学CSS一个多月了,以前网页制作的基础还不错,感觉CSS很好用,我正在用它做一个网站,刚开始有些地方遇上不少麻烦,不过还好,都解决了,经过半个月主页制作好了,感觉很满意,可是遇是了一个更麻烦的问题,我一直通过IE浏览器来查看的,可我今天放到Firefox里乱的好厉害,这是怎么回事啊,是不是有些浏览器里还不支持CSS的一些功能啊,还是自己制作过程中的问题,我买了精通CSS DIV这本书,主要是通过它来学习的,感觉很不错,不过现在看来有些基础了,有没有更好的书啊,实例多一些,麻烦您和我说说这些情况,真是不明白,谢谢！”首先，对于浏览器的兼容问题，这里给大家两个建议，供大家参考：1：当一个效果在Firefox和IE6中显示的不一样时，一般来说Firefox显示的是“正确”的效果，这里说的正确，并不是指主观希望的效果达到了就是正确效果，而是说按照真正的CSS规则，应该显示的效果，叫作正确的效果。也就是说，如果Firefox中显示的效果和希望的效果吻合，而与 IE显示不吻合，那么是IE有错误的可能性更大，而反之则说明很可能是为了迁就IE6的错误，而写了错误的代码。那么为什么不能以IE为标准，当作是IE的效果是正确的呢？这是因为，CSS的规则本身是严格符合逻辑的，是可以计算和预测的，而IE中的很多错误是没有道理的，无法预测的，因此，用一个错误修正了另一个错误，在局部看起来可能效果是正确的，但是很可能在其它地方，或者更大范围内带来不可预知的麻烦，从而严重影响效率。因此，比较好的做法是以Firefox作为正确的效果，让IE想办法来适应它。2：测试的时候，不要在一个浏览器中完全做好，再用另一个浏览器测试。例如，对于一个很复杂的页面，如果首先在Firefox中制作，已经完全测试好了，然后用IE查看，可能很多地方都是混乱的，此时就针对IE进行一系列调整，等调整好了，回到Firefox查看，又乱了，如此往复，结果可想而知。因此，从空白页面开始，每做一小步，就同时在各种浏览器中查看，一旦发现显示效果不同，立即查找原因，寻找解决办法，因为每次增加的代码都很少，这样就很容易找出原因，从而做到最后就可以同时满足各种浏览器了。总之原则就是，Firefox对CSS规范遵守的最好，调试的时候先用Firefox调试，然后再使网页兼容IE；其次，不要在一种浏览器完全做好以后，再用浏览器调试，而是每一步都保证在各浏览器中这个正确显示。技巧4：善于利用工具，提高调试效率这里要说的是两个非常方便的工具，他们都是以Firefox的插件形式存在的，分别是“Web Developer Toobar”和“Firebug”。当然，他们都不能向傻瓜相机一样，只要按一下快门，就告诉你问题出在哪里。他们的作用都是可以帮助你尽可能方便地了解浏览器是如何看待你的代码的。比如，通过他们，可以方便地查看每一个盒子的范围，不需要你在人为地设置边框了，通过Firebug，可以实时动态地修改CSS属性设置，这都可以大大提高你调试的效率。这里暂时没有篇幅来讲解这两个工具的用法了，有兴趣的读者可以先查一查相关的介绍。技巧5：善于提问，寻求帮助互联网出现了，这个伟大的家伙给我们带来了太多的方便。有了Google，我们可以寻找答案，有了各种网站论坛，我们可以去向别人请教，这都是我们学习的最好途径。但是有一点，这也需要一些提问的技巧和艺术。这里给您的建议就是，在提问之前，一定要按照前面说的几点，自己亲自研究过你的问题，你的问题可以用一两句话很具体地说明，可以配有简洁的代码，使看到你的问题的人，可以很容易理解你的问题，并“重现”你的问题。这一点非常重要，千万不要把大段大段的代码，贴到某个论坛上，那样你得到帮助的机会会变得小得多。