html - CSS3 不透明度过渡问题

Question

我一直在开发一个包含 CSS3 过渡的网站，但我遇到了一个小问题。

每当我将鼠标悬停在已应用它的元素上时，前一个 div 中的文本会在转换完成后模糊并恢复正常。它在 Chrome 和 Safari 中运行良好，但在 Firefox 中运行时出现问题。

我在这里重新创建了这个问题：http: //jsfiddle.net/fkbc6/

过渡当前应用于列表项，这显然不起作用。我也尝试将其应用于图像，但无济于事。

任何帮助将不胜感激，因为我完全没有想法。

Answer 1

http://jsfiddle.net/fkbc6/2/

错误是您应用的 CSS 的变换为 0.5 负度（目的是什么？）并且 Firefox 以一种奇怪的方式重新渲染所有字体，因为样式（在 css btw 中应用了两次）位于示例的顶部 div

#wepartner {
    overflow:auto;
    margin:70px auto 70px auto;
    padding-top:80px;
    background:#F6F6F6;
    background:rgba(0,0,0,0.02);
    padding:80px 50px 50px 50px;
    -moz-transform:rotate(0.5deg);
    -webkit-transform:rotate(0.5deg);
    -o-transform:rotate(0.5deg);
    -ms-transform:rotate(0.5deg);
    transform:rotate(0.5deg)
}
#wepartner .content {
    -moz-transform:rotate(-0.5deg);
    -webkit-transform:rotate(-0.5deg);
    -o-transform:rotate(-0.5deg);
    -ms-transform:rotate(-0.5deg);
    transform:rotate(-0.5deg)
}

删除后，一切都应该可以正常工作

编辑：哇，事实上你应用了两个具有相同值和不同方向的旋转，小心使用 Ctrl-C Ctrl-V ：P

编辑2：这个链接可以帮助你http://petermolnar.eu/linux-tech-coding/ie8-css-filter-matrix-cleartype-font-bug-fix/