javascript 跨浏览器兼容性问题

Cross-browser compatibility issues

提问by DarthVader

I see that many people have problems with cross-browser compatibility issues.

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

My question is why do browsers render the html, css or js differently?

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

Is it due to the DOM? The box model?

是因为DOM吗？盒子模型？

Why are there cross-browser compatibility issues when there are standards from W3C etc?

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

Are there any differences in the way the major Internet browsers display HTML content? Why is it that Internet Explorer, Firefox (Mozilla), Opera may display the same content differently?

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

What should I keep in mind when building a cross-browser compatible web site?

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

采纳答案by David Sulc

I'm sure someone will answer this much better, but here's a start:

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

Yes, there are standards that are supposed to be adhered with respect to CSS rendering. The problem is, some browser editors (coughMicrosoft cough) don't consider it a priority to implement the specifications correctly (or even fully, for that matter). Even, when the layout engine is being worked on to attempt to ensure compatibility, it can get quite nasty figuring out how things should be rendered correctly when mixing various CSS properties and units (see for example, the ACID test http://en.wikipedia.org/wiki/Acid3)

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

To have a cross-browser website, you'll basically have to check all of your website's pages render correctly in the browsers your visitors use (or that you support). Various tools such as Selenium (seleniumhq.org) can help with this.

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

You basically have to decide what you're going to do

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

• design for the lowest common denominator (if it's IE6, there isn't much you'll be able to do)
• design using validating CSS and using hacks (e.g. clearfix) to correct erroneous behavior in certain browsers
• decide not to support certain browsers (IE6 being a prime candidate)
• sniff browser and adapt display accordingly (NOT the preferred way to do it)

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

With respect to differences in manipulating the DOM, libraries such as jQuery help a lot as they hide the implementation differences from you.

关于操作 DOM 的差异，诸如 jQuery 之类的库提供了很多帮助，因为它们向您隐藏了实现差异。

For reference, it's a good idea to test your website in at least the following:

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

• WebKit-based browser (Chrome, Safari)
• Gecko-based browser (Firefox)
• IE
• Opera

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

回答by Hamish

There are a lot fof reasons or incompatibility:

有很多原因或不兼容：

• Specs are often written in responseto the development of propriety features by specific vendors,
• Specs can sometimes be poorly written, have ambiguity or were not written in anticipation of specific end-use cases.,
• Browser vendors occasionally ignore the specification for their own reasons.

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

Additional factors:

附加因素：

• A lot of this stuff is hard to implement, let along implement correctly,
• It also has to be implemented to handle poorly formed HTML, backwards compatibility etc. Browser vendors sometimes sacrifice 'correctness' for 'interoperability',
• History, politics & personalities.

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

回答by Free Consulting

It is an aftermath of the Great Browser War. Now Netscape Communications lies in ruins, but quirks opponents made to outperform each other is still remains in browsers' codebase, and people are still in development team. Consider watching Crockford's lecture, he gives some highlight on subject. (you will want to save the file instead of streaming it)

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

回答by James Kovacs

Everything that Hamish said, plus another major problem that he alluded to is how browsers handle incorrect HTML. For example, back in the days of IE4/NS4, the element was very problematic. If you didn't close a tag, IE4 would close it for you. Netscape 4 would silently disregard the table completely.

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

This is still true today where one browser will fix incorrect markup differently than another. Yes, the markup should be corrected, but browsers will try their best to render something.

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

回答by deceze

The standard specifies how HTML/CSS markup shouldbe rendered intodisplayed as visual elements. It does not specify how the renderingshould work specifically. Many different people and companies have created different ways of rendering markup visually. Since HTML rendering is an extremely complex task, of course they didn't all converge on the exact same solution. All rendering engines are aiming for the same goal, but often the spec is vague enough to allow for small differences (be it just pixel level), and bugs are inevitable as well.

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

Add to that that back in the days browser vendors cared less about standards and more about gaining market share quickly and that certain companies have been very slow in turning around to embrace standards (you know who you are).

此外，在浏览器供应商不太关心标准而更关心快速获得市场份额的时代，某些公司在接受标准方面的转变非常缓慢（你知道你是谁）。

In the end, specs, which are quite complex, and browsers, which are even more complex, are written by many different people; you can't expect absolute perfection to arise from this process. And perfection is not the goal of HTML either; it's meant to be a simple, vendor and platform independent markup language to present informationon a variety of devices, something it does remarkably well. If you need pixel perfect results, you need to go with a technology that was meant to provide this, like Adobe Flash (which is neither platform nor vendor independent nor simple).

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

Try to look at it from the glass-half-full perspective: Thousands of different people have written millions of lines of code doing vastly different things on many different platforms with many different goals and focuses, and yet in the end all render HTML markup almostidentical with often only tiny, virtually irrelevant differences. There are of course weak spots in every engine and if you happen to hit them all at once, your site will break in every browser in different ways. But this is possible to avoid with a bit of experience.

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