CSS变换旋转字母对齐

Question

CSS变换旋转字母对齐

htmlcsstransform

4

我正在使用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中完美地工作。

- jef2904

可能是浏览器渲染引擎的问题。 - AxelEckenberger

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robertc · Accepted Answer

在Firefox浏览器中存在问题，已经修复、又出现了问题并再次修复。可能可以通过使用不同的字体（因为不同的字体类型使用不同的渲染路径）来解决问题，或者您可以忍受它，直到浏览器解决此问题。