跨浏览器网站的最佳做法是什么?

时间:2009-06-30 16:09:10

标签: cross-browser

(我希望这是最权威的社区维基。我从自己对this question的回答中将其播种。)

指定所有内容

许多跨浏览器问题相当于:您没有指定某些内容,不同的浏览器会做出不同的假设。因此:

声明有效的doctype

您的doctype告诉浏览器您将在代码中使用哪些规则。如果您没有指定,浏览器必须猜测,不同的浏览器会以不同的方式猜测。

根据我的经验,“严格”的doctype使IE表现得更好(启用CSS之类的东西:在IE7中的div上悬停选择器)。

This article提供了关于doctypes的良好背景。

使用Web标准

避免使用特定于浏览器的标记,或仅在其他浏览器中的失败对网站体验不重要时才使用它。

验证您的HTML和CSS

您不必完美无缺,但验证是很好的反馈。正如Jeff said

了解规则和边界有助于您定义自己正在做的事情,并为您提供合法的弹药以达成一致或不同意。你可以做出明智的选择,而不是随意的“我只是这样做而且它有效”。

想象一下,您打开了一个段落标记,但从未关闭它。如果你打开一个列表标签,是不是意味着它在段落内?验证将帮助您捕获,关闭标记并消除歧义。

考虑CSS重置

不同的浏览器采用不同的基线CSS规则。您可以通过明确解决前面的差异来帮助他们所有人采取同样的行动。编写CSS: The Definitive Guide的Eric Meyer使用this reset。另一个受欢迎的选择是YUI Reset CSS

使用Javascript库进行DOM交互

每当您的Javascript需要使用页面上的元素时,最好使用jQuery,Prototype或MooTools等库。这些库被成千上万的开发人员使用,它们消除了浏览器对Javascript的解释之间的大部分不一致,在内部处理它们,并为您提供一组一致的命令。试图找到并解决所有这些不一致的问题是浪费时间并且可能会产生错误。

在多个浏览器中测试,最后处理IE

随时随地在多个浏览器中进行测试。通常,您会发现非IE浏览器的行为类似,IE是一种特殊情况 - 特别是如果您遵循上述建议。必要时,您可以在单独的样式表中添加IE hacks,并仅为IE用户加载它。

Quirksmode.com是搜索随机浏览器差异的好地方。

Browsershots.org可以帮助您了解您的网页在各种浏览器和操作系统中的显示方式。

正常失败

在每个存在的浏览器中,任何网站都不会看起来很完美。如果用户没有Flash,Javascript或高级CSS等,您仍希望您的网站可用。考虑到这一点的设计:

检查裸HTML

尝试使用裸HTML加载您的网站 - 没有样式,没有脚本。有菜单选项吗?主要内容是否位于次要内容之前?该网站是否可用,即使丑陋?

考虑测试驱动的渐进增强

this article中描述,此技术使用javascript检查浏览器是否具有给定的功能,例如支持给定的CSS属性,然后再在页面上使用它。它与浏览器嗅探不同,因为它测试的是功能而不是特定的浏览器。

7 个答案:

答案 0 :(得分:13)

使用类似jQuery的库抽象出DOM,AJAX和JavaScript的差异。

答案 1 :(得分:8)

确保尽可能将HTML,CSS和Javascript保存在单独的文件中。在HTML文件中混合结构,表示和行为只会使查找和修复问题变得更加困难。

答案 2 :(得分:2)

在Firefox中使用Firebug:

  • 调试/单步执行JS。
  • 了解您的样式表是如何被解释的,并在运行中对其进行黑客攻击以了解如何解决您的问题。
  • 查看您为远程资源拨打了多少电话以及他们需要多长时间。
  • 描述您的代码。

Chrome和IE8内置了类似的工具,可以用于同一件事。

Opera和Safari(和IE)有Firebug Lite

答案 3 :(得分:1)

  1. 在样式表开始时使用CSS重置...

    您可以获得一个here ...

  2. 通过w3c验证您的代码......

    您可以按页面链接验证代码here,也可以只复制粘贴页面元素

答案 4 :(得分:0)

我的#1规则是使用严格的doctype 。 HTML或XHTML很好,但使用严格的doctype几乎消除了所有浏览器的怪癖,特别是在IE7 +中。

  

想象一下,您打开了一个段落标记,但从未关闭它。如果你打开一个列表标签,你的意思是它是否在段落内?

实际上你不能在<p>标签内放置任何其他的块标签,这就是规范允许你省略结束标签的原因。如果在不关闭段落的情况下启动列表,则隐式关闭段落。验证者不会抱怨。

这并不是说你不应该关闭标签,因为它通常会使代码更容易被浏览(你不需要记住上述规则)。

答案 5 :(得分:-1)

考虑使用Google Web Toolkit为网站的UI编程。使用GWT,您可以使用Java编程语言编写所有代码,然后GWT将其交叉编译为优化的JavaScript,并自动适用于所有主流浏览器。

答案 6 :(得分:-1)

我认为使用最佳实践是可行的方法,渐进式增强是在设计时考虑用户并需要与所有设计师一起完成。我相信在浏览器上进行大量测试是确保正确显示内容的好方法,许多开发人员都会看这个。