我的问题仅出现在Opera(较新的Blink版本,仅在v27中测试过)和Mac OSX上。现在我知道这个浏览器的使用百分比几乎不存在,但我们在公司内部使用它,这是一个内部软件。
当我旋转.company-info div
时,一切正常,但文字消失了。它实际上在那里,我可以选择并复制它,它只是没有显示。
在其他浏览器,Chrome,FF甚至Opera 27(Win)中都可以正常使用。
你们有什么想法或者这只是一个Opera的错误吗?
(它适用于任何字体,因此它不是已知的字体问题)
我有以下代码:
HTML
<div class="company-info">
<img class="company-logo" src="media/logo-njoy.png" alt="nJoy" />
<div class="pull-left">
<span class="company-name">nJoy</span>
<span class="contact-job-title">Lead Product Designer</span>
</div>
</div>
SCSS
.company-info {
@include rotate(-90deg);
@include transform-origin(top right);
background-color: $gray-dark;
color: #ffffff;
padding: 10px;
position: absolute;
height: 60px;
right: 60px;
top: 0;
width: 225px;
.company-logo {
@include rotate(90deg);
border-radius: 100%;
float: left;
height: 40px;
margin-right: 10px;
width: 40px;
}
.company-name {
display: block;
font-size: 13px;
font-weight: 700;
}
.contact-job-title {
display: block;
font-size: 12px;
}
}
答案 0 :(得分:5)
在Opera 27中使用translateZ(0)进行文本旋转。