IE 10でバックグラウンドサイズのCSS遷移

Question

IE 10で動作するバックグラウンドサイズの遷移を得ることは可能ですか？ WebkitやMozillaではうまく動作しますが、Internet Explorer 10ではうまく動作しません。IEは他のすべてのものを表示します。また、背景サイズも変更されますが、移行はありません。

a { 
    background: url("../image.png") no-repeat scroll 0 0 transparent; 

    background-size: 302px auto; 
    -webkit-background-size: 302px auto; 
    -moz-background-size: 302px auto;  
    -ms-background-size: 302px auto; 

    transition: all 0.3s ease-in 0s; 
    -webkit-transition: all 0.3s ease-in 0s; 
    -moz-transition: all 0.3s ease-in 0s; 
    -ms-transition: all 0.3s ease-in 0s; 

    height: 83px; 
    margin: 0 0 0 8px; 
    width: 302px; 


} 

a:hover { 
    background-size: 324px auto; 
    -webkit-background-size: 324px auto; 
    -moz-background-size: 324px auto;  
    -ms-background-size: 324px auto; 

    box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5); 
    -ms-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5); 

    height: 89px; 
    margin: 9px 0 0 -4px; 
    width: 324px; 
} 

あなたの助けを借りてください！

Answer 1

大変申し訳ありませんが、IE10は移行プロパティとしてバックグラウンドサイズをサポートしていないようです。移行は単に失敗するだけですが、正常に低下するはずです。

Answer 2

私の友人のおかげで、私は望んだ結果を達成する別の方法を見つけました。私はちょうどバックグラウンドサイズを100％にして、幅や高さを変更しません。代わりに私は変換を使用してサイズを変更します。変換をIE10でも動作させることができます。

a { 
    background: url("../image.png") no-repeat scroll 0 0 transparent; 

    background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%;  
    -ms-background-size: 100% 100%; 

    transition: all 0.3s ease-in 0s; 
    -webkit-transition: all 0.3s ease-in 0s; 
    -moz-transition: all 0.3s ease-in 0s; 
    -ms-transition: all 0.3s ease-in 0s; 

    margin: 0 0 0 8px; 
    height: 83px; 
    width: 302px; 

} 

a:hover { 

    transform: scale(1.072,1.072); 
    -webkit-transform: scale(1.072,1.072); 
    -moz-transform: scale(1.072,1.072); 
    -ms-transform: scale(1.072,1.072); 

    box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5); 
    -ms-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5); 

    margin: 9px 0 0 8px; 
} 

でも、-o接頭辞付きのオペラで問題なく動作します。 IE9ではそれでも変わっていませんが、それ以外はすべて動作します。

共有したかっただけで、誰かが同じ問題を抱えている可能性があります。