最新版本的 Safari（Windows）与 Safari（MAC）、Google Chrome（Mac）与 Google Chrome（Windows）之间的渲染差异是啥？

Posted 2023-03-06

【中文标题】最新版本的 Safari（Windows）与 Safari（MAC）、Google Chrome（Mac）与 Google Chrome（Windows）之间的渲染差异是啥？

【英文标题】：What are rendering differences between latest versions of Safari(windows) vs Safari(MAc) vs Google Chrome(Mac) vs Google Chrome(Windows)?最新版本的 Safari（Windows）与 Safari（MAC）、Google Chrome（Mac）与 Google Chrome（Windows）之间的渲染差异是什么？

【发布时间】：2011-01-02 01:34:45

【问题描述】：

我应该全部检查吗？或者任何一个就足够了，因为它们都共享相同的渲染引擎 Webkit。

我的问题与 html CSS 渲染有关。

我知道一个区别 Safari for windows 和 MAC 都有字体平滑（抗锯齿）

还有其他区别吗？

【参考方案1】：

由于 Safari 的字体渲染，Chrome 和 Safari 之间肯定存在差异。在 Safari 中，由于抗锯齿算法，文本往往会更粗一些，有时会占用屏幕上的一些额外像素。

另外请记住，Safari 使用 SquirrelFish javascript 引擎，而 Chrome 使用 V8。

【讨论】：

javascript 引擎的不同会对 html css 的呈现产生什么影响？

如果您的页面根本不使用 javascript，那么您无需担心。可能破坏的不是 html 或 css，而是 javascript 代码。

所以不用担心javascript引擎是否不同，如果引擎不同那么我认为这是javascript渲染速度而不是HTML css渲染的问题

我使用的是跨浏览器兼容的 jquery。我会因为 Safari 使用 SquirrelFish javascript 引擎而 Chrome 使用 V8 而遇到任何类型的问题吗？

如果 jQuery 真的是跨浏览器兼容的，那么我们就不会每两周收到一次像 "my jQuery code works in <insert browser> but does not work in <insert IE version>" 这样的问题（仅上周我就数了 3 个）。使用库很好，因为它们已经为您解决了很多跨浏览器问题。但是图书馆作者只是凡人，我们能做的最好的就是尝试。

【参考方案2】：

我发现 Safari 和 Chrome 选择 SELECT 框的方式有所不同。我认为 Chrome 似乎忽略了行高，而在 Safari 中行高似乎有所不同。

Safari Windows 5.1.7 v's Chrome Windows 版本 22.0.1229.94 m

我认为这与默认的用户代理样式有关？

【参考方案3】：

我会检查，是的。

虽然所有浏览器都使用相同的渲染核心，但它们不一定使用相同的版本（无论如何，Safari 都有多个版本）。

此外，正如 slebetman 所说，字体渲染也因操作系统和抗锯齿设置而有很大不同，因此您需要注意这一点。

【参考方案4】：

阴影在 chome 中快速而丑陋；在 safari（和 firefox）中更慢更漂亮。 IIRC 在 CSS3 过渡方面也存在一些差异 - 但实际上，这些细节仍然在不断变化，并且随着版本的变化而变化。

在实践中，我只定期检查两者之一，这通常没问题。在将重大更改上线之前，再次检查显然不是一个坏主意，但在开发过程中，这不值得麻烦；无论如何，它们是如此相似......

【参考方案5】：

存在主要和次要差异。请检查！

次要：完全支持 Chrome 中的 CSS3 边框半径。我在 Safari 中读过，但找不到这个。

主要：在 Chrome 中放大会放大所有内容。 （几乎每个浏览器都有这种行为。） 缩放 Safari 会缩放文本，但其他内容保持不变。如果用户放大，那么您精心布置的表单很可能会被丢弃。留出大量额外空间。