在所有网络浏览器（包括谷歌浏览器）之间实现一致形式和功能的最佳技术是什么？答案

【问题标题】：What is the best technique for consistent form, function between all web browsers (including Google Chrome)?在所有网络浏览器（包括谷歌浏览器）之间实现一致形式和功能的最佳技术是什么？
【发布时间】：2010-09-07 21:32:07
【问题描述】：

短版：在 Web 开发人员和 Web 开发人员的最终用户使用的所有浏览器中，对于一致的表示和 AJAX 功能，最简洁和最易于维护的技术是什么？

IE 6、7、8
火狐2、3
野生动物园
谷歌浏览器
歌剧

长版：我写了一个web app aimed at other web developers。我希望我的应用在演示和 AJAX 行为方面都支持主要的网络浏览器（以及 Google Chrome）。

我从 Firefox/Firebug 开始，然后在 IE 6 和 7 下添加了条件 cmets 以实现一致的样式。接下来，令我惊讶的是，我发现 jQuery 在 IE 中的行为并不相同。所以我changed my Javascript to be portable on FF and IE 使用条件和不那么纯粹的 jQuery。

今天，我开始在 Webkit 和 Google Chrome 上进行测试，发现不仅样式与 FF 和 IE 不一致，而且 Javascript 根本没有执行，可能是由于语法或解析错误。我期待一些 CSS 工作，但现在我有更多的 Javascript 调试要做！在这一点上，我想在为所有情况写成堆的特殊情况之前退一步思考一下。

我不是在寻找灵丹妙药，而是在寻找最佳实践，以使事情尽可能易于理解和维护。如果这在没有服务器端智能的情况下工作，我更喜欢；但是，如果有一个优势，例如检查用户代理，然后将不同的文件返回到不同的浏览器，那么如果 Web 应用程序的总体可理解性和可维护性较低，那就没问题了。非常感谢大家！

【问题讨论】：

标签： css google-chrome portability

【解决方案1】：

Chrome 使用与 Safari 相同的渲染引擎，这样您就可以少担心一个浏览器。因此，如果它在 Safari 中工作，它应该在 Chrome 中工作完全相同。

请参阅 Matt Cutts 博客上的 this post。

Google Chrome 使用 WebKit 进行渲染，它与 Apple 的 Safari 浏览器是相同的渲染引擎，因此如果您的网站与 Safari 兼容，它应该在 Chrome 中运行良好。

更新：看起来这已经是过时的信息了。请参阅 Vox 对此答案的评论。

【讨论】：

Chrome 和 Safari 使用不同的 javascript 引擎，所以它可能会有所不同，事实上我也看到了一些渲染不一致 - 可能源于 Safari 和 Chrome 可能运行不同的 Webkit 版本跨度>

【解决方案2】：

对于用户界面，请查看Ext。

它作为一个独立的库非常棒，尽管它也可以与 jQuery、YUI、Prototype 和 GWT 一起使用。

示例：http://extjs.com/deploy/dev/examples/samples.html

【讨论】：

【解决方案3】：

Chrome 实际上与 Safari 有点不同，它使用完全不同的 javascript 实现，并且原型和 jquery 都报告了问题。现在我不会太担心它，它仍然是浏览器的早期测试版，这种不一致可能会被视为错误。这是bug report。

【讨论】：

【解决方案4】：

我处于类似情况，正在开发一个针对 IT 专业人员的网络应用程序，并且需要支持相同的浏览器集，但不包括 Opera。

到目前为止我学到的一些一般性的东西：

经常在尽可能多的目标浏览器中进行测试。确保您在开发计划中留出时间。
工具包可以帮助您获得跨浏览器支持，但最终会在某些浏览器上遗漏一些东西。计划一些时间来调试和研究针对特定浏览器的修复程序。
如果您需要工具包中没有的东西并且找不到免费的代码 sn-p，请花一些时间编写封装依赖于浏览器的行为的实用程序函数。
了解已知的浏览器错误，以便您可以围绕这些错误指导您的实施。

我学到了一些更具体的东西：

使用基于用户代理的条件代码仅作为最后的手段，因为“相同”浏览器的不同代可能具有不同的功能。相反，首先测试符合标准的行为——例如，if(node.addEventListener)...，然后是常见的非标准功能——例如，if(window.attachEvent)...，然后，如果必须，查看特定浏览器类型和版本号的用户代理.
了解 DOM 何时“准备好”进行脚本访问在几乎每个浏览器中都是不同的。一个好的工具包会为你抽象出来。
几乎每个浏览器中的事件处理程序都不同。一个好的工具包会为你抽象出来。
使用 document.createElement 和 element.setAttribute 创建 DOM 元素，尤其是表单控件或具有属性的元素可能会很棘手。虽然不是标准的（而且有点恶心），但使用 node.innerHTML 和包含一些 HTML 的字符串似乎在浏览器类型中更可靠。我还没有找到一个工具包，可以让您使用 element.setAttribute 将“名称”添加到 IE 中的表单元素。
CSS 差异（和错误）与 JS 差异同样重要。
“核心”Javascript 功能（字符串、日期、正则表达式、数组函数）似乎在各个浏览器中都非常可靠和一致，尤其是相对于 DOM/CSS/Window 函数而言。事实上，每个平台上的语言并不完全不同，这有点令人高兴。 :-)

我并没有真正遇到任何 Chrome 特定的 JS 错误，但它始终是我测试的第一批浏览器之一。

HTH

【讨论】：

【解决方案5】：

您可以考虑转向的一个“灵丹妙药”是Google Web Toolkit (GWT)。

我相信它支持您感兴趣的所有浏览器，并让您能够在与 Java 兼容的 IDE（如 Eclipse）中编写 UI。这样做的好处是您可以使用 IDE 工具进行代码补全和编译时错误检查，极大地改进了大型 UI 项目的开发。

如果你使用 GWT UI 组件，它会隐藏很多浏览器特有的讨厌的东西，而不必处理，但是当你编译时，会为每个浏览器平台创建一个紧凑的部署文件。这样，如果您在 Firefox 中查看应用程序，您将永远不会下载任何特定于 IE 的代码。您还将生成一个客户端存根，它将加载适当的已编译 JS 包。为了让交易更甜蜜，这些文件是可缓存的，因此回访者的感知性能通常会得到改善。

【讨论】：

谢谢！它看起来很漂亮，但是很难将我现有的 JavaScript 代码库（使用 jQuery/YUI/ie7-js/等）迁移到纯 Java 代码库，尤其是。团队中没有太多 Java 专业知识。但是很高兴发现服务器上不需要 Java/J2EE，并且支持 IE6。

【解决方案6】：

如果您是从基本重置或框架开始，并且已经考虑了 IE，但仍然很奇怪，您可能需要重新检查以下内容：

一切都验证了吗？ CSS 和 HTML？
指向包含文件（js、css 等）的任何断开的链接。在 Chrome/Safari 中，如果您的样式表链接被破坏，您的所有链接都可能以红色告终。（我认为与默认的 404 样式有关）
您可能正在使用的 js 插件有什么奇怪的要求吗？（css文件是否必须在js文件之前，就像jquery.thickbox一样？）

【讨论】：

【解决方案7】：

为了适应跨浏览器的开发，环境已经发生了很大变化。 jQuery、Prototype 和其他框架存在用于跨浏览器 Javascript。 CSS 重置 适用于从所有浏览器的通用空白画布开始。 BluePrint 和 960 都是 CSS 框架，可帮助使用近来非常流行的 CSS 网格布局 技术进行布局。

至于跨不同浏览器的其他 CSS 怪癖，这里没有圣杯，唯一的选择是跨不同浏览器测试您的网站并使用此 awesome resource 并肯定加入邮件列表以节省一些时间。

如果您正在开发大批量生产网站，那么您可以在最终游戏中使用 browsercam.com 之类的服务，以确保该网站不会在某些浏览器中严重崩溃。

最后，不要试图让网站在每个浏览器中看起来都一样。你的主要设计应该以 IE/FF 为目标，你应该对其他人做出合理的妥协。使用 graded browser chart 缩小浏览器支持范围。

至于最佳做法，开始在白纸上使用线框图或 Balsamiq 模型 等服务。我仍然对有多少开发人员从编辑器而不是线框开始感到惊讶，但我又一次换了一年，才意识到它节省了多少时间。将布局 (HTML)、演示 (CSS) 和行为 (Javascript) 完全分开。 HTML 中不应有样式元素，Javascript 中不应有显示（使用 .addClass('highlight') 而不是 .css({'background-color': 'red'});）。

如果您不熟悉本文中的任何粗体术语，那么在 Google 上搜索它们应该会对您的 Web 开发生涯和生产力有所帮助。

【讨论】：

【解决方案8】：

如果您的首要任务是在列出的所有浏览器上完全一致且没有差异，那么您可能应该关注 AS3 和 Flex。

【讨论】：

【解决方案9】：

就我个人而言，我使用Mootools 作为一个简单的轻量级javascript 框架。它使用简单，支持上述所有浏览器（Chrome 除外，但据我所知，它似乎也能正常工作）。

另外，为了确保跨浏览器的一致性，我得到了一个特性/样式/行为/等。首先在一个浏览器中工作（通常是带有 firebug 的 Firefox 3），然后立即检查以确保它在所有其他浏览器中工作（最后留下 IE6）。如果没有，我会花时间立即修复它，因为否则我知道我以后不会有时间（根据我的经验，让事情跨浏览器工作大约需要我开发时间的 50% ;- ))

【讨论】：

【解决方案10】：

我发现有四点有助于开发 JavaScript 应用程序：

特征检测
库
使用虚拟化进行迭代开发
JavaScript：权威指南，Douglas Crockford 和 John Resig

特征检测

使用反射来询问浏览器是否支持所需的功能。如果您想知道浏览器支持哪些事件处理，您可以使用 if(el.addEventHandler) 来满足 W3C 规范，if(el.attachEvent) 来满足 IE 类型，最后使用 el.['onSomeEvent']。

一个大但是！

浏览器有时会谎报他们支持的功能。我不记得了，但我遇到了一个问题，即 Firefox 实现了 DOM 功能，但如果您测试该功能，则会返回 false！

库

既然您已经在使用 jQuery，我将保留解释。但是，如果您遇到问题，您可能需要考虑 YUI，因为它具有出色的跨浏览器兼容性。他们甚至一起工作。

使用虚拟化进行迭代开发

也许是我最好的建议：一次运行所有测试环境。获得一个 Linux 发行版、Compiz Fusion 和一堆 RAM。下载 VMWare 的 VMWare 服务器或 Sun 的 Virtual Box 的副本并安装一些操作系统。获取适用于 Windows XP、Windows Vista 和 Mac OS X 的图像。

基本思想是这样的：Compiz Fusion 为您提供了 4 个桌面映射到一个 Cube。这些桌面中的一个是您的 Linux 计算机，下一个是您的虚拟 Windows XP 机器，在 Vista 之后的一个，最后一个是 Mac OS X。编写一些代码后，您可以 alt-tab 进入虚拟计算机并检查您的工作。而且它看起来很棒。

JavaScript：权威指南，Douglas Crockford 和 John Resig

这三个来源为我提供了 JavaScript 开发的大部分信息。权威指南也许是 JavaScript 最好的参考书。

Douglas Crockford 是雅虎的 JavaScript 专家（我讨厌这个词）。在 Yahoo! 视频上查找他的系列“Douglas Crockford Theory of the DOM”、“Douglas Crockford Advanced JavaScript”、“Douglas Crockford Theory of the Dom”和“Douglas Crockford The Good Parts”。

John Resig（如你所知）编写了 jQuery。他在 ejohn.org 的网站包含大量 JavaScript 信息，如果您在 Google 上搜索，您会发现他提供了许多关于防御性 JavaScript 技术的演示文稿。

...祝你好运！

【讨论】：

鲁尼，谢谢你的建议。你暗示麻烦制造者是 Javascript，而不是 HTML/CSS——这是一个好点。虚拟化是一个有趣的解决方案。我最近一直在使用 EC2 进行一次性测试工作。也许是时候升级内存了:)

【解决方案11】：

在JsLint.com 上使用“好的部分”+ 浏览器验证您的 javascript 使得 JavaScript 在 FF、Safari 等中的行为不太可能发生变化。

否则 - 使用标准和验证您的代码以及构建现有技术（如 jQuery）应该使您的网站在除 IE 之外的所有浏览器中表现相同 - 并且 IE 没有神奇的秘诀 - 它只是到处都有错误......

【讨论】：