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

StackOverflow https://stackoverflow.com/questions/45239

  •  09-06-2019
  •  | 
  •  

题

简洁版本：在 Web 开发人员和 Web 开发人员的最终用户使用的所有浏览器中实现一致的演示和 AJAX 功能的最简洁、最可维护的技术是什么？

  • IE 6、7、8
  • 火狐浏览器 2、3
  • 苹果浏览器
  • 谷歌浏览器
  • 歌剧

长版：我写了一个 面向其他网络开发人员的网络应用程序. 。我希望我的应用程序在演示和 AJAX 行为方面支持主要的网络浏览器（加上 Google Chrome）。

我开始使用 Firefox/Firebug，然后添加条件注释以在 IE 6 和 7 下保持一致的样式。接下来，令我惊讶的是，我发现 jQuery 在 IE 中的行为并不相同；所以我 将我的 Javascript 更改为可在 FF 和 IE 上移植 使用条件语句和不太纯粹的 jQuery。

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

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

有帮助吗？

解决方案

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

到目前为止我学到的一些一般知识：

  • 经常在尽可能多的目标浏览器中进行测试。确保您的开发计划中有时间进行此操作。
  • 工具包可以帮助您部分实现跨浏览器支持，但最终会在某些浏览器上错过某些内容。计划一些时间来调试和研究特定浏览器的修复程序。
  • 如果您需要工具包中没有的东西并且无法找到免费的代码片段，请花一些时间编写封装依赖于浏览器的行为的实用程序函数。
  • 了解已知的浏览器错误，以便您可以围绕这些错误引导您的实施。

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

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

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

华泰

其他提示

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

您可能会考虑求助的一个“银弹”是 谷歌网络工具包（GWT）.

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

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

为了适应跨浏览器开发，环境已经发生了很大的变化。 jQuery, 原型 以及其他跨浏览器 Javascript 框架。 CSS 重置 适合在所有浏览器的通用空白画布上开始。 蓝图 和 960 都是 CSS 框架来帮助使用 CSS 网格布局 这些天似乎变得非常流行的技术。

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

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

最后，不要试图让网站在每个浏览器中看起来都一样。您的主要设计应该针对 IE/FF，并且您应该接受对其他设计的合理妥协。使用 分级浏览器图表 缩小浏览器支持范围。

至于最佳实践，开始在白纸上使用线框或类似的服务 巴尔萨米克模型. 。我仍然很惊讶有多少开发人员从编辑器而不是线框开始，但我还是一年前才意识到它能节省多少时间。布局 (HTML)、表示 (CSS) 和行为 (Javascript) 完全分离。HTML 中不应有样式元素，Javascript 中不应有任何呈现（使用 .addClass('highlight') 代替 .css({'background-color': 'red'});).

如果您不熟悉这篇文章中的任何大胆术语，谷歌搜索它们应该会对您的 Web 开发生涯和生产力大有裨益。

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

  • 一切都验证了？CSS 和 HTML？
  • 包含的文件（js、css 等？）的任何损坏的链接。在 Chrome/Safari 中，如果您的样式表链接已损坏，则所有链接可能最终都会变成红色。（我认为与默认的 404 样式有关）
  • 您可能使用的 js 插件有什么奇怪的要求吗？（css 文件是否必须位于 js 文件之前，就像 jquery.thickbox 一样？）

对于用户界面，请查看 分机.

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

样品： http://extjs.com/deploy/dev/examples/samples.html

我发现有四件事对开发 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 Server 或 Sun 的 Virtual Box 的副本并安装一些操作系统。获取适用于 Windows XP、Windows Vista 和 Mac OS X 的图像。

基本思想是这样的：Compiz Fusion 为您提供了映射到多维数据集上的 4 个桌面。其中一个桌面是您的 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 技术的演示。

...祝你好运！

为了让您少担心一个浏览器，Chrome 使用与 Safari 相同的渲染引擎。因此，如果它在 Safari 中工作，那么它在 Chrome 中也应该工作得完全相同。

看 这个帖子 在马特·卡茨的博客上。

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

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

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

就我个人而言，我使用 穆工具 作为一个简单的轻量级 JavaScript 框架。它使用起来很简单，并且支持上述所有浏览器（Chrome 除外，但据我所知，这似乎也有效）。

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

使用“好部分”+浏览器验证您的 JavaScript 杰林特网 使得 JavaScript 在 FF、Safari 等中表现不同的可能性较小。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top