当带有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中，它不再强制在页面加载时对页面上的文本进行抗锯齿处理。

Answer 2

我想我发现了一个“确定”的解决方案。我有一个div，它与一个内部有Flash的iframe略微重叠。重叠的div让它的字体平滑搞砸了。要修复它，我只需要在iframe和重叠div上放置z-index。为了使其工作，iframe必须位于div之上（更高的z-index）。在上面的示例中，似乎没有任何内容与iframe重叠，但每个元素的边界可能会略微重叠。您可以使用Safari或Chrome中的Web检查器查看它。但我首先将z-index放在iframe和乱搞字体平滑的元素上。