CSS3不透明度轉換問題

我一直在合併CSS3轉換的網站上工作，我遇到了輕微的困難。CSS3不透明度轉換問題

每當我將鼠標懸停在已應用的元素上時，先前div中的文本會模糊並在轉換完成後恢復正常。它在Chrome和Safari中運行良好，但運行與Firefox的問題。

我重新這裏的問題：http://jsfiddle.net/fkbc6/

過渡目前應用於列表項，這顯然是行不通的。我也嘗試將其應用於圖像，但無濟於事。

任何幫助將不勝感激，因爲我都沒有想法。

來源

2012-04-19 carlh

http://jsfiddle.net/fkbc6/2/

這個錯誤是你申請的CSS具有0.5負度變換（什麼purpouse？）和Firefox重新渲染所有的字體以一種不可思議的方式，因爲樣式（在CSS應用兩次順便說一句）是在例如頂部的div

#wepartner { 
    overflow:auto; 
    margin:70px auto 70px auto; 
    padding-top:80px; 
    background:#F6F6F6; 
    background:rgba(0,0,0,0.02); 
    padding:80px 50px 50px 50px; 
    -moz-transform:rotate(0.5deg); 
    -webkit-transform:rotate(0.5deg); 
    -o-transform:rotate(0.5deg); 
    -ms-transform:rotate(0.5deg); 
    transform:rotate(0.5deg) 
} 
#wepartner .content { 
    -moz-transform:rotate(-0.5deg); 
    -webkit-transform:rotate(-0.5deg); 
    -o-transform:rotate(-0.5deg); 
    -ms-transform:rotate(-0.5deg); 
    transform:rotate(-0.5deg) 
}

一旦取消一切應該只是罰款

編輯：哇，其實你施加兩個具有相同的價值和不同的方向旋轉，要小心使用Ctrl-C按Ctrl-V：P

編輯2：可能這個鏈接可以幫助你http://petermolnar.eu/linux-tech-coding/ie8-css-filter-matrix-cleartype-font-bug-fix/

來源

2012-04-19 13:46:21

嘿大衛，你的幫助歡呼。正向旋轉僅用於文體目的應用於父div（#wepartner）。其子div（.content）的負向旋轉是爲了抵消鋸齒狀僞影（原始旋轉過程中發生的）並將文本和圖像設置回其原始方向。我看到這可以解決這個問題，但無論如何要保持div的輪換沒有這些問題？ – carlh 2012-04-19 14:01:30

當您將CSS應用於元素時，您也將其應用於其子元素。我嘗試將0deg應用於.content轉換，因爲負面轉換不會反應，但就像您要求向直線div添加負向旋轉一樣。也試圖把一個沒有價值的變換，但不起作用。更多信息：https://developer.mozilla.org/en/CSS/transform 我剛編輯我的答案添加新的鏈接 http://petermolnar.eu/linux-tech-coding/ie8-css-filter -matrix-cleartype-font-bug-fix/ – 2012-04-19 14:15:53

感謝您的鏈接David。怕我仍然無法工作。即使將單個變換添加到父級，但沒有給孩子，我似乎仍然在懸停期間出現渲染問題。這可能是一個瀏覽器錯誤，或者是我的CSS中可能導致它的東西嗎？ – carlh 2012-04-19 16:23:52

CSS3不透明度轉換問題

回答

相關問題