Css 用于嵌入flash内容的iframe时的Webkit字体呈现

请查看您是否使用Mac电脑

当你在Chrome或mac上的Safari（webkit）上看到这一点时，文本会跳到更浅的阴影/颜色

在mac上的firefox上没问题

如果删除html中包含youtube视频的第二篇文章并再次运行，它将在webkit中呈现良好效果

有什么想法吗？这肯定不仅仅是我的机器在做这件事

谢谢

编辑： 似乎与抗锯齿有关。 如果我这样做

-webkit-font-smoothing: antialiased !important;
font-smoothing: antialiased !important;

那就没有跳跃了。。。但是firefox和chrome看起来还是有很大的不同。FF在左边，铬在右边

---

好吧，我也遇到了同样的问题，我想我找到了一个“确定”的解决方案。我有一个div，它稍微重叠了一个iframe，iframe里面有Flash。那个重叠的div把字体平滑搞砸了。为了修复它，我只需在iframe和重叠div上放置

z-index

。为了使其工作，iframe必须位于div的顶部（更高的

z-index

）。在上面的示例中，似乎没有任何内容与iframe重叠，但每个元素的边界可能会稍微重叠。您可以使用Safari或Chrome中的web检查器查看它。但是我会先把

z-index

放在iframe上，以及那些破坏字体平滑的元素。

我按照上面markstewie的链接做了一些测试。通过反复试验，我已经在我正在工作的网站上解决了这个问题。它发生在safari和chrome的三个不同实例中

第一个实例是在包含文本的元素所在的容器中显示和隐藏下拉列表时。在jQuery中调用.show（）时，文本会变轻，而调用.hide（）时，文本会变重

第二种情况是，当一个包含文本的固定元素与另一个包含文本的元素重叠时，它会变轻，而当下面的文本层移开时，固定元素副本会再次变重

第三个是当一个flash元素加载到页面上时，字体会变得更轻

当文本变浅时，字体的呈现似乎从“亚像素抗锯齿”变为“抗锯齿”。通过设置在所有类型上强制“抗锯齿”平滑

-webkit字体平滑：抗锯齿

---

在正文中，字体在页面加载时以更轻的重量呈现，并且在任何情况下都不会改变。

我也遇到了这个问题

我通过将iFrame放在两个div中来修复它。我设置的第一个div位置：相对，宽度：100%，以及我的播放器所需高度的高度。我设置到位置的第二个div：绝对

---

iFrame现在处于绝对定位的div中，它不再强制页面上的文本在Safari中加载页面时进行抗锯齿。

不仅仅是我。刚找到这个，我没有看到任何跳转（Chrome Mac v.18.0.1025.168），如果你点击最后一个链接，你不会跳转。但是把chrome放在firefox旁边，就像图中一样，你应该知道我在说什么。你有没有找到解决这个问题的方法？我在Chrome和Safari上遇到了这个问题，这让我发疯（我没有向达斯汀道歉。我浪费了很多时间，我再也找不到原因了。这似乎是在不同浏览器中进行渲染的方式。要解决这个问题，我们所要做的就是在body标签上添加

z-index:1！重要；

）。