css - 当带有 Flash 的 iframe 在页面上时，Webkit 字体平滑错误。有解决办法吗？

Question

我在 Mac 上使用 Chrome 和 Safari 时遇到了一个令人讨厌的错误。似乎它与字体平滑以及页面是否具有内部带有 Flash 的 iframe 有关。

当我删除 iframe 时，文本看起来像是设置为font-smoothing: subpixel-antialiased（浏览器默认）。但是当 iframe 在页面上（其中运行 Flash）时，文本似乎设置为font-smoothing: antialiased.

有什么解决方法吗？请看下面的截图。

Answer 1

我也遇到了这个问题并像这样修复它：

.video1 { position: relative; height: 338px; width: 100%; }
.video1 > div { position: absolute; }

然后我将 iFrame 放在第二个 div 中。由于 iFrame 现在位于绝对定位的 div 中，它不再强制页面上的文本在 Safari 中加载页面时进行抗锯齿处理。

Answer 2

我想我找到了一个“好的”解决方案。我有一个 div 稍微重叠了一个 iframe，里面有 Flash。那个重叠的 div 的字体平滑搞砸了。要修复它，我只需将 z-index 放在 iframe 和重叠的 div 上。为了使其工作，iframe 必须位于 div 的顶部（更高的 z-index）。在上面的示例中，似乎没有任何东西与 iframe 重叠，但每个元素的边界可能略有重叠。您可以使用 Safari 或 Chrome 中的网络检查器查看它。但我只是先将 z-index 放在 iframe 上，然后将那些弄乱字体平滑的元素。