JET'S BLOG

虽然浏览器可能存在着很多 Bug，但是并不是与自己感觉不一样的时候就是出现了 Bug。产生问题的原因可能有很多种，因此我们需要一定的方法来排查问题。

选择一个支持WEB标准的浏览器进行测试是明智的做法，例如对 CSS 2.1支持比较好的 Opera 9.2、Firefox 2.0或者 Safari 3.0，而不要使用 IE 6作为唯一的测试浏览器，因为 IE 6的问题是最多的，这非常不利于我们理解 CSS 2.1的规范与判断浏览器的表现是否正确。

如果在支持 WEB 标准的浏览器内测试是正确的，而在IE内有问题，那基本上可以判定是 IE 的问题。 如果在支持WEB标准的浏览器内的显示不正确，那么可以先进行如下初步判断：

1、拼写是否正确
可以使用 W3C 的校验，或者网页编辑软件的校验功能，来检查（X）HTML 文档内的标签是否配套、嵌套顺序是否正确、空标签是否闭合, CSS 拼写是否正确。不正确的嵌套、错误的拼写是非常常见的错误。
提示：现在有很多编辑软件都可以提供（X）HTML 和 CSS 的校验功能，包括浏览器对 CSS 属性是否支持等。例如：Dreamweaver 8以上版本，TopStyle等软件。
提示：Firefox 中的附加软件 Firebug 是一个非常好用的工具，它不仅可以检查（X）HTML、 CSS 和JavaScript是否正确，还可以动态显示页面内元素的框和位置，是调试网页很好的辅助插件。

2、 是否有合适的DTD
在本书的其他章节里，曾经不止一次地强调过 DOCTYPE 的重要性，不同的 DOCTYPE 直接影响浏览器对于（X）HTML和 CSS 的解释。

3、 CSS 属性浏览器是否支持
虽然现代浏览器支持绝大部分的 CSS 2。1规范和部分的 CSS 3规范，但是在前面的章节也介绍过，有一些 CSS 属性还没有被浏览器广泛支持，因此在某个属性没有生效的时候，请确定浏览器是否支持。

4、隔离问题
将有问题的地方突出出来，例如给元素加一个醒目的边框或者背景颜色。
如果增加了边框就可以解决问题，那么就是边距重叠的问题。
如果增加了背景，但是背景不显示，那么有可能是特殊性或者浮动元素没有闭合。
尝试修改一些属性，特别是会触发IE的hasLayout的属性，判断是否是IE常见的Bug。

5、建立基本测试
如果还不能解决问题，则可以复制问题文件，然后删除多余的（X）HTML，只留下有问题的部分。
删除（X）HTML内的注释问题，看问题是否会消失。
删除元素间的空格，看问题是否会消失。
然后分块注释掉样式表，直到问题消失，则刚注释掉的样式即为问题所在。

6、解决问题而不是解决现象
找到问题根源的所在并解决它是最终目，而不是为了迁就表现而使用复杂的Hack来让网页看上去很美。不从根源上解决问题，当浏览器升级以后，可能会遇到更多的问题。同时，Hack的时候可能会造成新的问题的出现，特别是触发或者避免触发 IE 的 hasLayout 属性。

换一种思路也许也可以避免问题的出现，例如将元素的margin属性取消，改为设置其父元素的 padding 属性。

只有实在无法解决的时候，再使用 Hack。