CSS 旋转变换模糊文本

Question

我正在稍微旋转一个 div，但希望里面的文字是直的。

我用过以下...

.content {
  padding:20px;
  background:#F9ECDA;
  transform:rotate(-2deg);
  -ms-transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  -webkit-backface-visibility: hidden;
}

.contentinner {
  transform:rotate(2deg);
  -ms-transform:rotate(2deg);
  -webkit-transform:rotate(2deg);
}

请注意，我使用了 -webkit-backface-visibility: hidden; 来解决我在 Chrome 中遇到的抗锯齿问题(锯齿状边缘)。这样做的问题是，它模糊了我所有的文字。

在 Chrome 中看看这个... http://jsfiddle.net/Collins405/a9qnmp5k/

有什么技巧可以阻止文本模糊吗？

我考虑过将背景 div 设为伪 :before，但在 Drupal 中，内容需要根据我的客户输入的内容量调整高度，而 :before 元素不会这样做。

编辑:也在 Opera 中发生，但在 FF 中非常好

Answer 1

在 .contentinner 中使用 -webkit-backface-visibility: hidden;