可以采取哪些措施来避免跨浏览器兼容性问题？

Question

最近，我一直在与：奇怪的桌面边框/边距，div对齐，定位问题，以及支持Internet Explorer 6的噩梦。我知道很多像我这样的人被迫支持，IE6- IE8，Web-Kit和基于Mozilla的浏览器。

我的问题是：

1. 在多个浏览器中开发以节省时间时，您使用的重要规则是什么？
2. 如何防止自己编写不兼容的代码？
3. 避免黑客攻击代码的最佳方法是什么？
4. 您在哪里找到有关浏览器兼容性的研究，是否使用了任何工具？
5. 最后，你什么时候越线/你在哪里画画？

Answer 1

1. 我通常首先针对Firefox（或Safari）进行编码。这通常会产生除IE以外的浏览器的最佳结果。然后我点击了IE8，IE7，最后是IE6。

2. 了解哪些标签会给您带来麻烦，并避免不惜一切代价使用它们。这是关于每个浏览器问题的熟悉程度。

3. 不要使用黑客攻击。使用IE条件注释。通过使用条件注释，您可以为所有其他浏览器加载一个样式表，一个用于IE8，一个用于IE7，另一个用于IE6（如果您需要这种粒度来修复您的问题）。它将为您提供漂亮干净的样式表，尽可能少的hack-i-ness。

4. LitmusApp

5. 确实没有可以穿越的线条。如果需要兼容性，则需要兼容性。你可以尽可能地解决问题，直到你有一些可用的东西为止。

Answer 2

我想说从符合标准的代码开始。始终首先在符合标准的浏览器中进行测试，例如Firefox或Safari / Chrome。我更喜欢Firefox的插件（如Firebug，HTTPFox和Web开发栏）。然后以你的方式向下工作（并且向下，我的意思是所有版本的Internet Explorer）。

尝试远离每种情况或网站的临时修复，并尽可能地概括您的代码。例如，正如Justin Neesner在他的回答中所说，使用条件注释和IE6,7和8的一般样式表将淘汰大部分布局和格式问题，而不使用（太多）黑客攻击。您可以重复使用IE样式表，只需将特定于站点的代码放在其中即可。

使用像browsershots，netrenderder或LitmusApp这样的测试平台，这样您就可以在那里有多个版本的浏览器中查看您的网站正在做什么。深入研究浏览器兼容性会让你脱颖而出，但是像quirksmode.org这样的优秀资源可以为你提供有关不兼容性的小信息，所以你不要发疯，秃头。

至于我何时交叉/画线，它是99％的Internet Explorer问题，如果它足够接近看起来像FF或Chrome / Safari，我就完成了。几乎就像艺术一样，它不是在你完成添加的时候，当你完成删除你不想看到的废话时;那就是你知道它已经完成的时候。

Answer 3

我说除了坚持基础之外你没有那么多：

• 符合标准的HTML标准
• 尽早验证，经常验证
• 对于Javascript，请使用JQuery，Prototype或Dojo
等框架
• 选择一个首先优化的“主浏览器”。

在每个项目中，会出现一些问题，但如果你坚持这些要点，不要太多。

我发现构建100％W3C有效代码非常有帮助。并不是因为它很重要 - W3C验证器抱怨的大部分内容都不会对现实世界的浏览器产生任何影响 - 但是因为能够运行验证并获得绿灯并且知道一切都很好，这非常有帮助。

要一次测试多个IE实例，可以使用IETester。它并不完美 - 条件评论不会在其中起作用 - 但主要用于日常开发工作。

Answer 4

使用像html 4.1 transititional这样的doctype，它使ie6在标准模式中呈现。您还可以使用重置样式表。

Answer 5

使用严格兼容的HTML和CSS标记，不要使用CSS的浏览器专有扩展。

IE 6没有正确实现CSS，首先是对盒子模型的无知。

另一方面，IE 8有一个测试套件来证明他们正确实现了CSS 2.1的各个方面（没有其他浏览器可以做到）。

如上所述开发Firefox并做出支持IE 6＆amp; 7或不。坦率地说，我不再为这些浏览器开发单独的样式表。他们没有足够的市场份额（至少在我的网站上。）

鉴于对HTML 5的兴趣以及对XHTML 2缺乏兴趣，请开发HTML 4.01 Strict并遵循以下实践:( HTML 4中推荐，HTML 5和XHTML 1.1中都需要）

1. 所有元素和属性名称必须以小写字母显示
2. 必须引用所有属性值，
3. 非空元素需要结束标记
4. 不允许属性最小化，
5. 在严格模式下，所有内联元素都必须包含在块元素中。

Why to learn HTML 4.01 Strict with references.

Answer 6

Also see the CSS 2.1 Test Suite

Answer 7

所以我已经跑了一段时间了，26天后我想我准备好对我的发现给出一些反馈。

<强>编码

首先，我发现列系统似乎减少了写入的HTML和CSS的数量。它们也非常适合跨浏览器。虽然有很多，我发现960 Grid System对我来说效果最好：http://960.gs

接下来我发现Ruby有一个很酷的CSS扩展名为 LESS 。这已经移植到.NET，可以在http://www.dotlesscss.com找到。设置简单，使用时功能非常强大。

Javascript，可能很棘手，但我发现避免使用像JQuery这样的语言中的某些选择器和快捷方式不仅可以加快应用程序的性能，还可以减少尴尬的行为。

测试浏览器：

这是有趣的部分。没有任何软件，我发现在相同的情况下测试我的应用程序对Internet Explorer 6和Safari实际上有助于提高我的开发速度。 Firebug和Firefox实际上让我围绕这些问题进行开发，这就是导致大量额外代码的原因。在开发针对IE6和Safari的简单代码时，我发现回到Firefox和IE8非常容易。我遇到的大多数问题都是边框宽度，这很容易修复。

我发现可以访问的最佳软件解决方案是Expression Web with Superpreview，如果你想知道为什么微软会发布一堆IE版本，它可能会让你卖给你这样的工具。

无论如何，这是我现在的2美分。