5

如果您使用的是 Mac，请参阅http://jsfiddle.net/CVwXV/2/ 。

当您在 Mac 上的 Chrome 或 Safari (webkit) 上查看此内容时，文本会跳转到更浅的阴影/颜色。

mac上的firefox没问题。

如果您删除包含 youtube 视频的 html 中的第二个 ARTICLE 并再次运行，它会在 webkit 中正常呈现。

有任何想法吗？这肯定不仅仅是我的机器在做这个。

谢谢。

编辑：似乎与抗锯齿有关。http://jsfiddle.net/CVwXV/3/ 如果我这样做..

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

然后没有跳转......但它在Firefox和Chrome之间看起来仍然有很大不同。FF 在左边，Chrome 在右边。

演示

4

3 回答 3

1

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

于 2012-08-01T14:27:31.813 回答
0

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

第一个实例是在与包含文本的元素相同的容器中显示和隐藏下拉列表时。当在 jQuery 中调用 .show() 时，文本会变得更轻，而当调用 .hide() 时，文本会变得更重。

第二个例子是当一个包含文本的固定元素与另一个包含文本的元素重叠时，它会变得更轻，当下面的文本层移开时，固定元素的副本会再次变得更重。

第三个是当 Flash 元素加载到页面上时，字体会变浅。

似乎当文本变得更轻时，字体的渲染从“亚像素抗锯齿”变为“抗锯齿”。通过设置强制对所有类型进行“抗锯齿”平滑

-webkit-font-smoothing：抗锯齿；

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

于 2012-08-15T13:48:00.433 回答
0

我也遇到了这个问题。

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

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

于 2013-01-10T04:15:54.740 回答