可以采取哪些措施来避免跨浏览器兼容性问题?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了可以采取哪些措施来避免跨浏览器兼容性问题?相关的知识,希望对你有一定的参考价值。
最近,我一直在与:奇怪的桌边框/边距,div对齐,定位问题,以及支持Internet Explorer 6的右噩梦。我知道很多像我这样的人被迫支持,IE6-IE8,Web -Kit和基于Mozilla的浏览器。
我的问题是:
- 在跨多个浏览器开发以节省时间时,您使用的重要规则是什么?
- 你如何防止自己编写不兼容的标签?
- 避免黑客攻击代码的最佳方法是什么?
- 您在哪里找到有关浏览器兼容性的研究,您使用任何工具吗?
- 最后,你什么时候越线/你在哪里画画?
- 我通常首先针对Firefox(或Safari)进行编码。这通常会产生除IE以外的浏览器的最佳结果。然后我打IE8,IE7,然后终于IE6。
- 了解哪些标签会给您带来麻烦,并避免不惜一切代价使用它们。这都是关于每个浏览器问题的熟悉程度。
- 不要使用黑客攻击。使用IE条件注释。通过使用条件注释,您可以为所有其他浏览器加载一个样式表,一个用于IE8,一个用于IE7,另一个用于IE6(如果您需要这种粒度来修复问题)。它将为您提供漂亮干净的样式表,尽可能少的hack-i-ness。
- LitmusApp
- 确实没有可以穿越的线路。如果需要兼容性,则需要兼容性。你只需要尽可能地解决问题,直到你有一些可用的东西。
我想说从符合标准的代码开始。始终首先在符合标准的浏览器中进行测试,例如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,我就完成了。几乎就像艺术一样,它不是在你完成添加的时候,当你完成删除你不想看到的废话时;那就是你知道它已经完成的时候。
我说除了坚持基础之外你没有那么多:
- 符合标准的html标准
- 尽早验证,经常验证
- 对于javascript,使用像JQuery,Prototype或Dojo这样的框架
- 选择一个首先优化的“主浏览器”。
在每个项目中,都会有一些问题,但如果你坚持这些要点,不要太多。
我发现构建100%W3C有效代码非常有帮助。并不是因为它很重要 - W3C验证器抱怨的大部分内容都不会对现实世界的浏览器产生任何影响 - 但是因为能够运行验证并获得绿灯并且知道一切都很好,这非常有帮助。
要一次测试多个IE实例,可以使用IETester。这并不完美 - 条件评论不会在其中起作用 - 但主要用于日常开发工作。
使用像html 4.1过渡的doctype,这使得ie6在标准模式中呈现。您还可以使用重置样式表。
使用严格兼容的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中要求)
- 所有元素和属性名称必须以小写形式出现,
- 必须引用所有属性值,
- 非空元素需要结束标记,
- 不允许属性最小化,
- 在严格模式下,所有内联元素必须包含在块元素中。
Why to learn HTML 4.01 Strict with references.
Also see the CSS 2.1 Test Suite
所以我现在已经跑了一段时间,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美分。
以上是关于可以采取哪些措施来避免跨浏览器兼容性问题?的主要内容,如果未能解决你的问题,请参考以下文章
在调整 linode 磁盘大小之前,我应该采取哪些预防措施?
软件的可维护性与哪些因素有关?在软件开发过程中应该采取哪些措施来提高软件产品的可维护性?
我应该采取哪些措施来保护我的Google Maps API密钥?