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

Nat*_*ong 39 cross-browser

(我希望这是最权威的社区维基.我根据自己对这个问题的回答来播种.)

指定一切

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

声明有效的doctype

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

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

本文提供了有关do​​ctypes的良好背景知识.

使用Web标准

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

验证您的HTML和CSS

您不必完美无缺,但验证是很好的反馈.正如杰夫所说:

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

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

考虑CSS重置

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

使用Javascript库进行DOM交互

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

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

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

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

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

优雅地失败

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

检查裸HTML

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

考虑测试驱动的渐进增强

本文中描述,此技术使用javascript来检查浏览器是否具有给定的功能,例如在页面上使用它之前支持给定的CSS属性.它与浏览器嗅探不同,因为它测试的是功能而不是特定的浏览器.

Jef*_*nes 13

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


Psy*_*uin 8

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