internet-explorer - IE 10 中背景大小的 css 转换

Question

是否有可能让背景大小的过渡在 IE 10 中工作？它适用于 webkit 和 moz，但不适用于 IE 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

感谢我的一个 friend ，我找到了另一种方法来实现我想要的结果。我只是让 background-size 为 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 中它仍然可以，那里没有过渡，但其他一切正常。

只是想分享一下，也许有人有同样的问题。