前沿视频教室————最好的CSS和Web设计与开发的视频教程

• 教室首页
• 初来必看
• 读者留言
• 订购好书
• 你问我答
• 前沿论坛
• 虚拟主机

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、论坛都是工具，也仅仅是一个工具，谁能用得好，谁就能获得更快的提高，关键还是要看使用工具的主人。

好了，暂时写这5点，欢迎大家讨论和补充！没有仔细校对，如果您在文中发现错别字或者语法错误，敬请告知，谢谢！

这篇文章发表于 2008年01月29日 星期二 10:52 am，并被分类于你问我答。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。

欢迎您发表留言

12条留言

• At 2009.01.03 15:52, 电器维修 留言:

  不错－不错。。有空来我的论坛转转

  [回复]
• At 2008.11.28 09:51, aa 留言:

  如果高版本的IE浏览网页正常底版本的应该就不会出错了吧。。。

  [回复]
  • At 2008.11.28 20:58, chance 留言:

    aa，

    不是这样的，IE 7能正常显示的很多都不能在IE 6正常显示。

    [回复]
    • At 2008.12.02 11:10, aa 留言:

      那做网站应该以ie6为主还是ie7为主呢好一些呢。。
      谢谢。。

      [回复]
      • At 2008.12.03 09:37, chance 留言:

        aa，

        这两个目前都很重要，是使用人最多的两个浏览器，所以二者都要测试。

        [回复]
  • At 2008.11.28 10:10, 鹤庭逸 留言:

    如果能兼容IE6 . Firefox 一般都沒問題了.

    [回复]
    • At 2008.11.28 20:56, chance 留言:

      鹤庭逸，

      这个倒是未必吧，IE 6 和Firefox差异还是有点大，IE6的bug还是不少。

      [回复]
      • At 2008.11.28 21:06, 鹤庭逸 留言:

        通过IE6 , IE7 就不是问题了 。。 过了Firefox ，Opera 也一般没问题。。

        能兼容这四个浏览器。。在中国是绝对的够用了。

        [回复]
• At 2008.01.30 09:02, 雕刻寂寞 留言:

  设置背景色或者边框，确认错误范围
  个人觉得还是用背景色好,用边框的话,又要考虑盒模型.对盒模型不是很了解的话,用边框就不太合适了

  [回复]
  • At 2008.01.30 09:25, 雕刻寂寞 留言:

    补充一下:
    推荐几个IE的调试工具:
    IEDevToolBar
    IE7pro
    multiple-ie (整合了IE3-IE6)

    [回复]
    • At 2008.01.30 09:27, chance 留言:

      谢谢雕刻寂寞 的推荐，一定仔细研究试验一下这几个工具！

      [回复]
  • At 2008.01.30 09:13, chance 留言:

    是的，能用背景色尽量用背景色。

    不过有的时候页面情况复杂了，背景色看不出问题。比如，有的时候由于前面的设置，某一个盒子的高度或者宽度已经是0了，而你却没有意识到这一点，这时候用背景色就看不出它在哪里了，用边框还可以找到它。

    此外，这个问题还在于，如果一个页面从一开始就是本人做的，对所有设置都很清楚，就比较好办，最麻烦的是改别人的东西，或者找了一个现成的模版，要修改它，这时就就比较麻烦，要彻底把所有设计都搞明白，要花很多时间，找现成就是为了省点事，只能是修修补补，这种贴膏药式的修补最容易出问题，而且还不好找出问题在哪里。

    无论用什么方法，如果不是对盒子模型、标准流、浮动、定位这些基本原理充分理解的话，作复杂的页面几乎都是不可能的。

    [回复]

• 视频教程

  • JavaScript+jQuery
    • JavaScript/CSS/DOM基础
    • JavaScript开发进阶
    • jQuery应用
  • CSS设计彻底研究（适合提高）
    • CSS核心基础
    • 深入CSS盒子模型
    • CSS导航设计
    • CSS高级样式设计
    • CSS整体布局详解
  • CSS/DIV页面布局设计（适合入门）
    • CSS基本概念
    • CSS/DIV布局专题讲解
    • CSS与其他技术
    • CSS/DIV综合实践
    • 漫画图说CSS+DIV入门
  • Flash动画制作
    • 绘制图形
    • 静态文字效果
    • 元件与实例
    • 基本动画
    • 理解图层
    • 路径引导动画
    • 遮罩动画
    • 动态文字效果
    • 按钮与交互
    • 理解影片剪辑
    • 加入声音
    • ActionScript 动作脚本
    • Flash CS3 新特性
  • Dreamweaver网页制作
    • Dreamweaver CS3 新功能
    • 基础知识
    • 网页元素
    • 网页表单
    • 使用表格
    • 图层定位
    • 框架布局
    • 网站综合制作
    • 与Fireworks配合
  • Photoshop
    • 文字效果
    • 图像处理
    • Photoshop CS3 新功能
    • 《精通PS CS2》配套讲解
  • Fireworks
    • Fireworks CS3 新功能
    • 与Dreamweaver配合
    • 《精通Fireworks 8》配套讲解
  • 概述
    • 新书快递
    • 本站信息
    • 图书勘误与补充材料
    • 网页设计杂谈
    • Web开发杂谈
    • 你问我答
    • 随心随笔
    • 书评与推荐
    • 读者故事&案例研究
    • 趣站推荐
  • 前沿竞赛
    • 24小时CSS设计竞赛

• 

  “学以致用”主机使用视频教程：

  1:新手起步 2:上传和发布第一个网页

  3:设置域名解析 4:cPanel控制面板简介

  5:设置附加域名和子域名 6:安装WordPress

•  

   

  顺便看看现在流行的计算机图书吗?

  您更习惯在当当购物?请走这边

• 推荐链接

  • 17css-青色's Blog
  • 个篱遐想录
  • mymickey
  • Junghae Blog
  • KILY's Blog
  • 细节之锤
  • 蜈蚣's Blog
  • ----
  • 交换链接方法说明

前沿视频教室的内容版权属于北京前沿科技，http://www.artech.cn。Copyright 2006-2010
本网站使用了 WordPress 2.2 中文版 和 Lasse Havelund制作的 Mesozoic 页面主题。