我有一个音频帖子,其中的信息位于专辑封面顶部显示的旋转 DIV 中。明白我的意思去here (the page).左下角的区域是信息。在 Chrome 中查看时,您会看到 DIV 的边缘是模糊的。有没有办法“别名” DIV,使它们看起来很清晰?我知道这不是分辨率问题,因为 Firefox 可以完美地显示它们。
.audioBox {
position:absolute;
bottom:160px;
margin-left:-11px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
z-index:3;
width:343px;
}
.boxify {
margin:1px;
padding:5px;
float:left;
bottom:0;
width:329px;
}
.box {
background:#000;
padding:5px;
padding-left:10px;
padding-right:10px;
margin-left:-5px;
}
<div class="audioHolder">
<div class="audioBox">
<div class="boxify" id="song">
<img id="audioBubble"
src="http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png">
{block:TrackName}
<span class="box">{TrackName}</span>
{/block:TrackName}
</div>
<div class="boxify" id="artist">
{block:Artist}
<span class="box">{Artist}</span>
{/block:Artist}
</div>
<div class="boxify" id="label">
<span class="box">{PlayCountWithLabel}</span>
</div>
<div class="boxify" id="download">
<span class="box">Download
{block:ExternalAudio}
<a href="{ExternalAudioURL}">Download</a>
{/block:ExternalAudio}</span>
</div>
</div>
解决方案:我用相同颜色的背景图像替换了背景颜色。 :-) 希望它能帮助遇到类似问题的其他人。
最佳答案
我知道我来晚了,但是...
我现在有类似的问题,在我的情况下改变大小有帮助,只需使用偶数
.blurry {
left: 100px;
height: 30px;
width: 135px;
}
.sharp {
left: 200px;
height: 30px;
width: 136px;
}
关于html - Chrome 中旋转的 DIV 边缘模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7076526/