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

(我希望这是明确的社区wiki,我从我自己的答案中接受了这个问题 。)

指定一切

很多跨浏览器的问题都是这样的:你没有指定什么,不同的浏览器做出不同的假设。 因此:

声明一个有效的文档types

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

根据我的经验,一个“严格”的文档types使IE的行为更好(启用像CSS的东西:hoverselect器在IE7中的div)。

这篇文章给了doctypes很好的背景。

使用Web标准

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

validation您的HTML和CSS

你不必一切都完美,但validation是很好的反馈。 正如杰夫所说 :

了解规则和边界可以帮助你确定你在做什么,并为你提供合法的弹药来达成一致或不同意。 你可以做出明智的select,而不是随意的“我只是做这个,它的工作”一个。

想象一下,你打开了一个段落标记,并从来没有closures它。 如果你打开一个列表标签,你的意思是它是否在段落内? validation将帮助你捕捉到,closures标签,消除歧义。

考虑一个CSS重置

不同的浏览器会采用不同的基准CSS规则。 你可以通过明确地消除差异来帮助他们采取相同的行动。 谁写了CSS:权威指南 ,Eric Meyer使用这个重置 。 另一个stream行的select是YUI重置CSS 。

使用Javascript库进行DOM交互

只要你的Javascript需要处理页面上的元素,最好使用像jQuery,Prototype或MooTools这样的库。 这些库被成千上万的开发者使用,他们采用浏览器对Javascript的解释之间的大部分不一致性,在内部处理这些不一致的内容,并为您提供一组一致的命令。 试图寻找和解决所有这些矛盾是浪费时间和可能造成的错误。

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

随时testing多个浏览器。 一般来说,你会发现非IE浏览器的行为是相似的,IE是一个特殊情况 – 特别是如果你按照上面的build议。 必要时,您可以将IE hack添加到单独的样式表中,并仅为IE用户加载。

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

Browsershots.org可以帮助显示您的网页将如何显示在各种浏览器和操作系统。

顺利地失败

没有网站会在每个存在的浏览器看起来完美。 如果用户没有Flash或Javascript或高级CSS等,您希望您的网站可以使用。 devise时要考虑到这一点:

检查裸露的HTML

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

考虑testing驱动的渐进式增强

在本文中描述,这种技术使用JavaScript来检查浏览器是否具有给定的function,如支持给定的CSS属性,然后在页面上使用它。 这与浏览器嗅探不同,因为它testing的是function而不是特定的浏览器。

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

确保你保持HTML,CSS和Javascript在单独的文件尽可能多。 在HTML文件中混合结构,performanceforms和行为只是使查找和修复问题更困难。

在Firefox中使用Firebug for:

  • 通过你的JSdebugging/步进。
  • 看看你的样式表是如何被解释的,并且可以随时黑客来查看如何解决你的问题。
  • 查看您为远程资源拨打了多less个电话,以及他们需要多长时间。
  • 剖析你的代码。

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

Opera和Safari(和IE)都有Firebug Lite 。

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

    你可以在这里得到一个…

  2. 通过W3Cvalidation您的代码…

    您可以通过页面链接在这里validation您的代码,或者只需复制粘贴页面元素

我的#1规则是使用严格的文档types 。 HTML或XHTML是好的,但使用严格的doctype几乎删除了每一个浏览器的怪癖,特别是在IE7 +。

想象一下,你打开了一个段落标记,并从来没有closures它。 如果你打开一个列表标签,你的意思是它是否在段落内?

其实你不能把任何其他块标签放在<p>标签内,这就是为什么规范允许你省略结束标签。 如果您在不closures段落的情况下启动列表,则该段落将隐式closures。 validation者不会抱怨。

这并不是说你不应该closures标签,因为它通常会使代码更容易删除(你不需要记住上面的规则)。

考虑使用Google Web Toolkit编写您网站的用户界面。 使用GWT,您可以使用Java编程语言编写所有代码,然后GWT将其交叉编译为可在所有主stream浏览器中自动运行的优化JavaScript。

我认为使用最佳实践是一条路,渐进增强与用户心目中的devise,需要与所有devise师一起完成。 我相信在浏览器上进行大量的testing是确保显示正确内容的好方法,许多开发人员都会看这个。