CSS变换旋转字母对齐 [英] CSS Transform Rotate letter alignment
问题描述
Im使用CSS转换以旋转h2 5deg。
Im using CSS Transforms to rotate an h2 5deg.
由于某些原因,字母不一致。
For some reason the letters are out of alignment.
看看这里的例子
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
Why is this happening? Does anyone know how to fix it. Its happening in both FF 3.6 and Chrome 5
编辑:似乎在Chrome 5中为Win和mac而不是linux正常工作。它的问题在FF 3.6为Win,Mac,linux和其在Mac上的Safari 5完美工作
It seems to work correctly in Chrome 5 for Win and mac but not linux. Its having issues in FF 3.6 for Win, Mac, linux and its working perfectly in Safari 5 on Mac
推荐答案
href =https://bugzilla.mozilla.org/show_bug.cgi?id=518172 =nofollow noreferrer>在Firefox 中遇到此问题,该问题已修复,损坏并重新修复。它可以使用不同的字体(因为不同的字体类型使用不同的渲染路径),或者你可以忍受,直到浏览器排序。
There's an issue with this in Firefox which has been fixed, broken and fixed again. It may be possible to work around by using a different font (because different font types use a different rendering path), or you could live with it until the browsers get it sorted out.
这篇关于CSS变换旋转字母对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!