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设为psuedo：之前，但是在Drupal中，内容需要根据客户端输入的内容来调整高度，并且a：在元素之前不会这样做。

编辑：也在Opera中发生，但在FF

中相当不错

Answer 1

在.contentinner

中也使用-webkit-backface-visibility: hidden;