跟踪网页设计的bug的第一步是检查你的HTML 和CSS,检查打字或语法错误。某些显示错误是由于浏览器以混杂模式显示页面造成的。因此,最好检查使用的是否符合自己的标识语言的DOCTYPE,从而让页面以标准模型来显示。可以通过安装Firefox开发人员工具条,了解页面将以什么模式显示。

如果页面以混杂模式显示,那么工具条最右边的对钩符号是灰色的,如果页面以标准模式显示,那么对钩符号是绿色的。可通过单击对钩符合来获得页面更多信息,并且显示地定义显示模式。

许多Windows开发人员以前主要使用IE浏览器开发页面,所以每次修改页面后,他们会在IE中预览页面,看看效果是否正确。在页面差不多准备好之后,他们在各个浏览器中进行测试并尽可能修改任何的Bug,但是,这样做可能会导致许多长期的问题。IE6是一个名声狼藉的浏览器,有很多Bug和几个重要的CSS缺陷。

如果使用IE作为主要开发浏览器,许多开发人员会错误地把IE的表现解释为正确,因此反而认为现在浏览器“破坏”了他们精心布置的CSS布局。实际上是IE破坏,它与现代标准浏览器存在不兼容。

所以选择更符合标准的浏览器(例如Firefox或Safari)作为主要的开发浏览器是为更安全的开发方法。如果你的布局在这其中一个浏览器中工作正常,那么它可能在所有符合标准的浏览器中都会表现正常,这样的做法是正确的。

但在消除网页中的Bug的一个最好方法应该是从一开始就要避免问题。许多Bug是由过分复杂的HTML或CSS造成的。因此,应该尽可能使用简单的代码实现所需的结果。所以要避免使用过分花俏的技术,只在绝对必须的情况在才使用hack。

如果使实现同一个效果有许多方法,在花费数小时调试某种技术之前,应该考虑是否可以采用另一种方法,只有在确认了没有解决问题的简单办法之后,才应该开始考虑复杂的解决方案。

在设计过程中出现了Bug,就需要尽力隔离问题,通过隔离问题和识别症状,有可能查明问题的原因并修复它。隔离问题的一种方法就是在相关的元素上应用边框或轮廓,看看它们的反应;或者尝试修改几个属性,看看它们是否影响Bug,如果有影响,查明是怎么影响的;尝试使用Bug的效果扩大化是有帮助的;或者尝试一些常见的解决方案,例如将position属性设置为relative,将display属性设置为inline或者设置宽度等尺寸,就可以修复许多Bug.

如果问题比较棘手,应该考虑创建一个基本测试案例。具体做法,(待续)。