我知道 IE10 应该支持所有没有任何供应商前缀的 CSS3 转换。不过,我无法让我的特定样式在 IE10 中正确显示。
这是我的问题的示例:http://jsfiddle.net/ntwiles/8xw5N/1/
.photo_bar_image {
background-image:url("http://i.imgur.com/eODa6AC.jpg");
border-radius:9px;
background-size: 125px;
display: inline-block;
width: 125px;
height: 125px;
text-decoration:none;
transition-property: background-size, background-position;
transition-duration:0.2s;
}
.photo_bar_image:hover {
background-size:140px;
background-position: -5px -5px;
}
它在我测试过的浏览器中运行良好,但在 IE10 中,转换很不稳定。 (具体来说,它似乎正确地转换了 background-position 属性,但跳过了 background-size 属性的转换帧。
我有什么样的选择来处理这类问题?
最佳答案
尝试这样做:
.photo_bar_image {
background-image:url("http://i.imgur.com/eODa6AC.jpg");
border-radius:9px;
background-size: 125px;
display: inline-block;
width: 125px;
height: 125px;
text-decoration:none;
-webkit-transition-property: background-size, background-position;
-moz-transition-property: background-size, background-position;
-ms-transition-property: background-size, background-position;
-o-transition-property: background-size, background-position;
transition-property: background-size, background-position;
-webkit-transition-duration:0.2s;
-moz-transition-duration:0.2s;
-ms-transition-duration:0.2s;
-o-transition-duration:0.2s;
transition-duration:0.2s;
}
.photo_bar_image:hover {
background-size:140px;
background-position: -5px -5px;
}
关于html - CSS 过渡和 IE10,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21369583/