html - CSS3 不透明度过渡问题

Question

我一直在处理一个包含 CSS3 转换的网站，但遇到了一个小问题。

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

我在这里重现了这个问题:http://jsfiddle.net/fkbc6/

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

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

Answer 1

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

错误是您应用的 CSS 有 0.5 负度数的转换(什么目的？)并且 Firefox 以一种奇怪的方式重新呈现所有字体，因为样式(顺便说一句，在 css 中应用了两次)位于顶部 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/