最近，我一直在处理以下问题：奇怪的表格边框/边距、div对齐、定位问题，并且在支持Internet Explorer 6方面遇到了噩梦。我知道很多像我一样被迫支持IE6-IE8、Web-Kit和基于Mozilla的浏览器的人。
我的问题是：
- 在开发跨多个浏览器的网站时，您使用哪些重要规则来节省时间？
- 如何避免编写不兼容的标签？
- 避免修改代码的最佳方法是什么？
- 您在哪里查找有关浏览器兼容性的研究，是否使用任何工具？
- 最后，您在何时越过界限/在何处划线？
如何避免跨浏览器兼容性问题？
9
- Andrew
7个回答
6
我通常首先针对Firefox（或Safari）进行编码。这通常会产生比IE更好的跨浏览器结果。然后我测试IE8、IE7，最后是IE6。
了解哪些标签会导致问题，并尽可能避免使用它们。这与熟悉每个浏览器的问题有关。
不要使用hack技巧。使用IE条件注释。通过使用条件注释，您可以为所有其他浏览器加载一个样式表，为IE8加载一个样式表，为IE7加载一个样式表，如果需要为IE6加载另一个样式表，则可以实现这种细粒度控制以修复您的问题。这将为您提供干净漂亮的样式表，尽可能少地使用hack技巧。
实际上并没有什么界限需要突破。如果您需要兼容性，那就需要兼容性。您只需逐一解决问题，尽力缩小问题范围，直到获得可用的结果。
- Justin Niessner
4
我建议从符合标准的代码开始。首先在像Firefox或Safari/Chrome这样的符合标准的浏览器中进行测试。我更喜欢Firefox，因为它有一些插件（例如Firebug、HTTPFox和Web Development Bar）。然后逐步向下兼容（我的意思是所有版本的Internet Explorer）。
尽量避免临时解决方案，而是尽可能通用你的代码。例如，正如Justin Neesner在他的答案中所说，使用条件注释和一个通用的样式表来处理IE6、7和8，可以消除大部分布局和格式问题，而不需要使用太多的hack。你可以重复使用IE样式表，只需在其中放置特定于站点的代码。
使用像browsershots、netrenderder或LitmusApp这样的测试平台，以便在众多浏览器版本中查看您的站点的情况。深入研究浏览器兼容性将让您抓狂，但任何好的资源，如quirksmode.org，都可以提供关于兼容性小问题的信息，以便您不会抓狂并变秃头。
至于何时跨越/划线，99%是Internet Explorer的问题，如果与FF或Chrome/Safari足够接近，我就结束了。就像艺术一样，不是在你添加完之后，而是在你删除你不想看到的垃圾时，才知道它完成了。
尽量避免临时解决方案，而是尽可能通用你的代码。例如，正如Justin Neesner在他的答案中所说，使用条件注释和一个通用的样式表来处理IE6、7和8，可以消除大部分布局和格式问题，而不需要使用太多的hack。你可以重复使用IE样式表，只需在其中放置特定于站点的代码。
使用像browsershots、netrenderder或LitmusApp这样的测试平台，以便在众多浏览器版本中查看您的站点的情况。深入研究浏览器兼容性将让您抓狂，但任何好的资源，如quirksmode.org，都可以提供关于兼容性小问题的信息，以便您不会抓狂并变秃头。
至于何时跨越/划线，99%是Internet Explorer的问题，如果与FF或Chrome/Safari足够接近，我就结束了。就像艺术一样，不是在你添加完之后，而是在你删除你不想看到的垃圾时，才知道它完成了。
- tahdhaze09
2
我一直在浏览quirksmode.org，这个网站真的很棒 :) 谢谢。 - Andrew
很高兴你喜欢它。我在搜索IE6中的min-height和max-height时发现了它。有时候想要做一个没有这些属性的布局真的很痛苦！ - tahdhaze09
3
我认为除了坚持基本原则，你不太能做什么：
在每个项目中，都会有一些问题，但是如果您坚持这些要点，问题就不会太多。
我发现构建100％ W3C有效代码非常有帮助。不是因为它很重要 - W3C验证器抱怨的大部分内容在实际浏览器中都没有任何影响 - 而是因为能够运行验证，并获得绿灯并知道所有的东西都很好非常有帮助。
要同时测试多个IE实例，可以使用IETester。它不是完美的 - 例如，条件注释在其中无法工作 - ，但在日常开发工作中大多数情况下可用。
- Pekka
1
谢谢 :) 我会尝试使用IETester，即使在像jQuery这样的框架中，我仍然有问题无法解决。我尽量避免使用它们来修复任何样式问题，但有时我发现我别无选择。特别是对于调整高度，这样做是否不好？ - Andrew
1
使用类似于HTML 4.1 Transitional的文档类型，这可以让IE6以标准模式渲染。您还可以使用重置样式表。
- Ikke
1
使用严格符合HTML和CSS标记，并且不要使用浏览器专有的CSS扩展。
IE 6从其对盒模型的绝对无知开始，没有正确实现CSS。
另一方面，IE 8拥有一个测试套件，可以证明他们正确地实现了CSS 2.1的每个方面（其他浏览器都没有）。
按照上述规定为Firefox开发，并决定是否支持IE 6和7。坦白说，我不再为这些浏览器开发单独的样式表。它们在我的网站上市场份额不足。
考虑到HTML 5的兴趣和对XHTML 2缺乏兴趣，开发HTML 4.01 Strict并遵循以下做法：（这些做法在HTML 4中推荐，在HTML 5和XHTML 1.1中要求）
- 所有元素和属性名称必须以小写字母出现，
- 所有属性值必须用引号括起来，
- 非空元素需要闭合标签，
- 不允许属性最小化，
- 在Strict模式下，所有内联元素必须包含在块元素中。
- rdivilbiss
0
我已经忙碌了一段时间，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版本，那可能是因为他们可以向你销售这些工具。
无论如何，这就是我现在的观点。
- Andrew
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接