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