html - CSS Transform 旋转字母对齐

Question

我正在使用 CSS 变换将 h2 旋转 5 度。

由于某些原因，字母没有对齐。

看这里的例子

http://dev.bestprintideas.com/bpi/image.png

这是CSS

.note-offer h2 { 
    color: #626262;
    text-shadow: none;
    text-transform: none;
    margin: 15px 0 10px 25px;
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
}

HTML

  <div class="note-offer">
    <div class="clip"></div>
      <h2>
         <span class="orange">The&nbsp;Essentials</span> <div>Package</div>
      </h2>
      <img src="http://mydomain.com/123/200-tag.png">
      <p>Duis lobortis ligula vitae mauris lobortis congue. Morbi cursus  porttitor feugiat. Aliquam tempus, nunc sed tempor volutpat, dolor lorem  mollis quam, a elementum sapien purus ac&nbsp;
          <a class="read-more" href="http://dev.bestprintideas.com/bpi/offers/the-essentials-package/">Learn more…</a>
      </p>
 </div>

为什么会这样？有谁知道如何修理它。它发生在 FF 3.6 和 Chrome 5 中

编辑:它似乎在适用于 Win 和 Mac 的 Chrome 5 中正常工作，但不适用于 Linux。它在适用于 Win、Mac、linux 的 FF 3.6 中存在问题，但在 Mac 上的 Safari 5 中运行良好

Answer 1

有一个 issue with this in Firefox已修复，损坏并再次修复。可以通过使用不同的字体来解决(因为不同的字体类型使用不同的渲染路径)，或者您可以忍受它直到浏览器解决它。