Css 在chrome中悬停时文本渲染变得模糊

我在hover版本27.0.1453.110的Chrome Mac OS X上遇到了文本模糊的问题，但在Windows上也有可能

此处是要查看的链接--将鼠标悬停在视频库底部菜单上

---

谢谢大家!

在iMac上的Chrome 27.0.1453.110上，它不会变得模糊。事实上，当我将鼠标移过或移出时，它会将文本高度或大小压缩一秒钟，但随后会很快恢复到正常大小。检查字体/文本大小的定义

我刚刚检查了您的css，并且

文本阴影：

正在应用于悬停，但被分成两行：

        .main-navigation a:hover,
        .widget-post.pm-first a:hover,
        .ticker-content a:hover,
        .utilities ul li a:hover,
        .cat-tabs ul li a:hover
        {color:#ffffff; text-shad
        ow: 0px 0px 2px rgba(255, 255, 255, 0.3);}

---

在iMac上的Chrome 27.0.1453.110上，它不会变得模糊。事实上，当我将鼠标移过或移出时，它会将文本高度或大小压缩一秒钟，但随后会很快恢复到正常大小。检查字体/文本大小的定义

我刚刚检查了您的css，并且

文本阴影：

正在应用于悬停，但被分成两行：

        .main-navigation a:hover,
        .widget-post.pm-first a:hover,
        .ticker-content a:hover,
        .utilities ul li a:hover,
        .cat-tabs ul li a:hover
        {color:#ffffff; text-shad
        ow: 0px 0px 2px rgba(255, 255, 255, 0.3);}

---

我无法告诉您为什么这样做有效，但您需要向执行CSS3转换的元素添加

-webkit backface visibility:hidden

（感谢@JugularKill的回答）

这一点特别有趣（至少对我来说）的原因是Chrome中的

背面可见性是

因此，在您的特殊情况下，解决方案是：

.videogallery .navCon .navigationThumb {
    ....
    -webkit-backface-visibility:hidden;
    ....
}

我无法告诉您为什么这样做有效，但您需要向执行CSS3转换的元素添加
-webkit backface visibility:hidden

（感谢@JugularKill的回答）

这一点特别有趣（至少对我来说）的原因是Chrome中的
背面可见性是

因此，在您的特殊情况下，解决方案是：

.videogallery .navCon .navigationThumb {
    ....
    -webkit-backface-visibility:hidden;
    ....
}

我不会在Chrome 27.0.1453.110的Windows上看到模糊的文本，我会在28.0.1500.44 beta-m上看到。尝试禁用css转换，看看会发生什么。我猜这与你在悬停时的过渡和不透明度有关。我在Windows上的Chrome 27.0.1453.110上看不到模糊的文本。我是在28.0.1500.44 beta-m上看到的。尝试禁用css转换，看看会发生什么。我猜这与你的过渡和悬停时的不透明度有关。