旋轉文本被打破

我試圖用Chris Coyier's CSS把角帶在我的div ..旋轉文本被打破

.ribbon-wrapper-green { 
    width: 85px; 
    height: 88px; 
    overflow: hidden; 
    position: absolute; 
    top: -3px; 
    right: -3px; 
} 

.ribbon-green { 
    font-size: 10px; 
    font-weight:bold; 
    color: #111; 
    text-align: center; 
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform:  rotate(45deg); 
    -o-transform:  rotate(45deg); 
    position: relative; 
    padding: 3px 0; 
    left: -5px; 
    top: 15px; 
    width: 120px; 
    background-color: #BFDC7A; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:  -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:  -o-linear-gradient(top, #BFDC7A, #8EBF45); 
    color: #6a6340; 
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 
    box-shadow:   0px 0px 3px rgba(0,0,0,0.3); 
}

的問題是，小的時候和旋轉，文字似乎打破。

這裏的小提琴：

http://jsfiddle.net/H6rQ6/8728/

如果它不是在你的瀏覽器打破，這是我現在面臨什麼樣的快照：

enter image description here

來源

2013-06-21 soundswaste

您正在使用哪種瀏覽器？ – showdev

鉻版27.0.1453.116 m – soundswaste

44度似乎稍微減輕了一點 – j08691

我解決了這個問題，這要歸功於showdev，通過使用

-webkit-transform: rotate(45deg) translate3d(0, 0, 0);

這是因爲字體是默認鉻抗鋸齒，並使用translated3d(0,0,0)柔滑他們。

來源

2013-06-27 07:34:18 soundswaste

這是完全瀏覽器的bug。你無法避免它。

來源

2013-06-21 19:00:30 Mooseman

任何文件來支持？ – showdev

@showdev我沒有找到CRbug條目。 – Mooseman

夠公平的，謝謝檢查。它聽起來像一個文本渲染的瀏覽器問題。奇怪的是，我沒有看到OP使用的瀏覽器版本。我很好奇，如果這已被記錄。 – showdev

你可以試試力的瀏覽器刷新/重新計算文本的佈局，字體風格的演奏： http://jsfiddle.net/H6rQ6/8730/

.ribbon-green { 
    font-weight: bold ; 
    font-size:12px; 
    font-family:Sans-Serif; 
    color: #111; 
    font-variant: small-caps; 
    font-size:120%; /* other rules */ 
}

編輯，實際上，它只是與字體太小，以平滑地渲染做。

問候

來源

2013-06-21 19:26:54

旋轉文本被打破

回答

相關問題