跨浏览器兼容性问题答案

【问题标题】：Cross-browser compatibility issues跨浏览器兼容性问题
【发布时间】：2010-11-28 23:37:15
【问题描述】：

我看到很多人都存在跨浏览器兼容性问题。

我的问题是为什么浏览器会以不同的方式呈现 html、css 或 js？

是 DOM 的原因吗？盒子模型？

当有 W3C 等标准时，为什么会出现跨浏览器兼容性问题？

主要互联网浏览器显示 HTML 内容的方式有什么不同吗？为什么 Internet Explorer、Firefox (Mozilla)、Opera 可能会以不同的方式显示相同的内容？

在构建跨浏览器兼容的网站时应注意什么？

【问题讨论】：

即使你强调你的问题，答案是：因为不同的浏览器是不同的。对于最后一个问题我觉得davidsulc给出了很好的答案。
有什么不同？解析器？ DOM？盒子模型？
@user177883 - 是的。他们都是。加上渲染代码、脚本语言、内部架构以及构成浏览器的所有其他内容。 - 事实上，浏览器最显着的地方在于它们的相似性。
@user177883 在过去的大部分时间里，微软只是不关心标准。现在他们正在开发 IE9，这是对部分版本的重大改进。
@Šime Vidas - 我认为这是相当不公平的。如果您查看 HTML 和 CSS W3C 规范的致谢部分，您会在几乎所有这些规范中找到 Microsoft 名称。我们不应该忘记 IE6 曾经是最先进的、符合标准的浏览器。只是出于商业原因，MS 在 IE6 上停止了进展，当他们终于意识到需要重新开始时，陷入了困境。

标签： javascript html browser

【解决方案1】：

有很多原因或不兼容：

规范通常是为响应特定供应商开发的专有功能而编写的，
规格有时可能写得不好、含糊不清，或者不是为预期特定的最终用例而编写的。
浏览器供应商有时会出于自身原因忽略该规范。

其他因素：

很多东西很难实现，更不用说正确实现了，
还必须实现它以处理格式不佳的 HTML、向后兼容性等。浏览器供应商有时会为了“互操作性”而牺牲“正确性”，
历史、政治和人物。

【讨论】：

这并没有真正解释有关问题的任何内容。它可能只是 A 问题的部分答案。
???! @user177883：Hamish 刚刚概述了所有问题的大部分原因，除了最后一个问题。
@user177883 您的问题（或一系列问题）非常广泛，我试图以同样的精神回答它 - 对根本原因的概述。也许将每个问题分解成一个更具体的问题，您就会得到每个主题的详细答案。

【解决方案2】：

我相信有人会更好地回答这个问题，但这是一个开始：

是的，在 CSS 渲染方面应该遵守一些标准。问题是，一些浏览器编辑器（cough Microsoft cough）不认为正确（或什至完全，就此而言）实施规范是优先事项。甚至，当布局引擎正在努力确保兼容性时，在混合各种 CSS 属性和单位时，弄清楚应该如何正确呈现事物可能会变得非常讨厌（例如，参见 ACID 测试http://en.wikipedia.org/wiki/Acid3）

要拥有一个跨浏览器的网站，您基本上必须检查您网站的所有页面在您的访问者使用的（或您支持的）浏览器中是否正确呈现。 Selenium (seleniumhq.org) 等各种工具可以帮助解决这个问题。

你基本上必须决定你要做什么

为最小公分母设计（如果是 IE6，您将无能为力）
使用验证 CSS 和使用 hack（例如 clearfix）来纠正某些浏览器中的错误行为进行设计
决定不支持某些浏览器（IE6 是主要候选）
嗅探浏览器并相应地调整显示（不是首选方式）

关于操作 DOM 的差异，像 jQuery 这样的库帮助很大，因为它们隐藏了实现的差异。

作为参考，最好至少在以下方面测试您的网站：

基于 WebKit 的浏览器（Chrome、Safari）
基于 Gecko 的浏览器 (Firefox)
IE
歌剧

【讨论】：

【解决方案3】：

这是浏览器大战的后果。现在 Netscape Communications 已成废墟，但对手为了超越对方而制造的怪癖仍然存在于浏览器的代码库中，人们仍在开发团队中。考虑观看 Crockford 的 lecture，他在主题上给出了一些亮点。（您需要保存文件而不是流式传输）

【讨论】：

【解决方案4】：

Hamish 所说的一切，以及他提到的另一个主要问题是浏览器如何处理不正确的 HTML。例如，在 IE4/NS4 时代，该元素非常成问题。如果您没有关闭标签，IE4 会为您关闭它。 Netscape 4 会默默地完全忽略该表。

今天仍然如此，一种浏览器修复错误标记的方式与另一种不同。是的，应该更正标记，但浏览器会尽力呈现某些内容。

【讨论】：

【解决方案5】：

标准规定了 HTML/CSS 标记应该如何~~渲染成~~显示为可视元素。它没有具体说明渲染应该如何工作。许多不同的人和公司创造了不同的视觉呈现标记的方式。由于 HTML 渲染是一项极其复杂的任务，当然它们并没有都集中在完全相同的解决方案上。所有渲染引擎的目标都是相同的，但通常规范不够模糊，允许存在细微差异（只是像素级别），并且错误也是不可避免的。

此外，在过去，浏览器供应商不太关心标准，而更多地关心快速获得市场份额，而且某些公司在接受标准方面非常缓慢（你知道自己是谁）。

归根结底，相当复杂的规范和更复杂的浏览器是由许多不同的人编写的；你不能指望这个过程会产生绝对的完美。完美也不是 HTML 的目标。它旨在成为一种简单的、独立于供应商和平台的标记语言，用于在各种设备上呈现信息，它在这方面做得非常好。如果您需要像素完美的结果，则需要使用旨在提供此功能的技术，例如 Adobe Flash（它既不独立于平台，也不独立于供应商，也不简单）。

试着从半满的角度来看待它：成千上万不同的人编写了数百万行代码，在许多不同的平台上以许多不同的目标和重点做着截然不同的事情，但最终都呈现HTML 标记几乎相同，通常只有很小的、几乎不相关的差异。当然，每个引擎都有弱点，如果你碰巧同时击中它们，你的网站将以不同的方式在每个浏览器中中断。但如果有一些经验，这是可以避免的。

【讨论】：