昨天我在模板开发方面打破了规则之一——我在验证之前就开始了跨浏览器测试。

我的设计在Safari和Firefox中看起来完美无瑕，没有思考，我想看看它在Internet Explorer中的样子。正如你们大多数人可能经历过的，首次在设计上等待Internet Explorer 6或7加载页面可能会是一种令人神经紧张的经历。

令我惊讶的是，设计在IE7中实际上看起来相当不错，令人惊讶的是，IE6也没有看起来太糟糕。但这直到我发现了一个关于布局项目中一些填充的奇怪错误。

Internet Explorer 7和Internet Explorer 6中的一个奇怪行为——说这不是真的吧。好吧，事实证明，这个错误不仅在IE方面有意义，而且在CSS技术层面上也是有意义的。

错误，或者说至少是我犯的错误所在

基本上，我在CSS中有一个错误，这意味着我在特定的选择器上指定了填充，并且无意中重复了相同的规则，但没有完成它。

CSS看起来像这样

#mainContent.twoR {border-right: 1px solid #F0EFED;padding-right: 4%;width: 95%;padding-right:}

结果是，所有“良好”的浏览器都认识到最后的规则是不完整的，并显示了正确的填充（即第一条规则）。

而IE6和IE7看到了第二条规则，即使它是不完整的，也显示了零填充。

层叠层次结构——这是CSS的工作方式

从CSS工作的角度来看，这种行为确实是有意义的——层叠层次结构意味着CSS规则在页面越往下走时优先级越高。然而，因为好的浏览器是聪明的，几乎是心灵感应的——我这里的意思是，是的，它们可以读懂你的心思——前设计师可能会被误导，产生一种错误的安全感，认为他们的代码是完美的。

Internet Explorer，如果它在积极方面做任何事情，确实测试了这个假设。

这个错误让我困惑了一会儿，因为我第一次检查规则时没有看到那个损坏的重复项，但很快我想起我还没有验证代码。轻按CSS编辑验证器按钮就显示出了错误。

验证或消失

我认为这真的强调了在开始跨浏览器测试之前验证你的设计的重要性。花在排查这种小问题上的时间很快就会积累起来，等你意识到的时候，你已经在花费数小时跨浏览器测试“错误”，而这些错误本可以通过快速验证代码来解决。

我经常在排查用户在我们论坛上发布的布局问题时使用验证器，尤其是当奇怪的行为只在IE浏览器中出现时，但我认为验证器应该成为你编码模板套件中必不可少的一个工具。

验证您网站的工具

Firefox的网页开发者工具栏内置了验证器链接。只需导航到“工具”>“验证CSS”或“验证HTML”，它就会为您验证当前页面。

否则，您可以通过访问W3C验证器本身来访问，通过访问W3C网站本身并输入您的地址，上传文件或直接输入要测试的代码。

我也经常在cssedit中使用验证按钮，因为它非常快捷，检查器允许您立即导航到有问题的代码并立即在该文件中修复错误。

您使用什么工具？

我在其他地方提到，我倾向于陷入我的工作流程并使用相同的工具来开发网站，所以我非常希望知道...

您如何验证代码？您使用哪些工具和应用程序来完成这项工作？您设计模板的规则是什么？