在Chrome中旋轉的DIV邊緣模糊

我有一個音頻帖子，其中的信息是旋轉的DIV顯示在專輯封面的頂部。看我的意思去here (the page).左下角的區域是信息。在Chrome瀏覽器中查看時，您會看到DIV的邊緣模糊不清。有沒有辦法「混淆」DIV，使它們看起來很銳利？我知道這不是一個解決方案，因爲Firefox可以完美地顯示它們。在Chrome中旋轉的DIV邊緣模糊

.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>

解決方法：我改爲使用相同顏色的背景圖像替換背景顏色。 :-)希望它能幫助有類似問題的其他人。

來源

2011-08-16 Earl Larson

別名是在CSS中不可能。反鋸齒由瀏覽器控制。 –

所以沒有真正的解決方案呢？ –

您可以瀏覽其他關於控制反鋸齒的線索，但這是針對畫布的http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element –

我知道我有點晚，但...

我有類似的問題，現在，在我的情況下，改變大小的幫助，只是用偶數

.blurry { 
    left: 100px; 
    height: 30px; 
    width: 135px; 
} 

.sharp { 
    left: 200px; 
    height: 30px; 
    width: 136px; 
}

http://jsfiddle.net/_hags/9e4cS/

來源

2014-04-03 11:40:03 hagi

有點遲到？這篇文章是在2011年！ – Albzi

是的，谷歌仍然記得這個帖子，很奇怪;） – hagi

在Chrome中旋轉的DIV邊緣模糊

回答

相關問題