IE10上的转换不适用于两个绝对定位的元素（例如）

Question

基本上我有两个div绝对位于同一个位置，并使用不透明度控件滑过它们。

使用modernizr我检查css转换支持并依赖Jquery淡化Ie8和Ie9，但是Ie10确实有转换因此它不会回退到它，并且它在那里不起作用。

以下示例在chrome和Ie10上进行了测试

http://jsfiddle.net/ycheG/

我想避免对此结构进行大量的html / css更改，如果我不需要嗅探它，那么javascript后备就足够了。

HTML

<div class="opaque"></div>
<div class="opaque green active"></div>

<button> Toggle</button>
enter code here

CSS

.opaque {
  position: absolute;
  left: 200px;
  width:100px; 
  height:100px; 
  background-color:red; 
  transition: opacity 1s ease-in-out; 
  opacity:0;
}

.opaque.green {
   background-color: green;
}

.opaque.active {
 opacity: 1;
}

JS

$("button").on("click", function(){ 
  $(".opaque").toggleClass("active");
})

Answer 1

试试这段代码：

transition: opacity 1s ease-in-out; 
-ms-transition: opacity 1s ease-in-out;

这应该适用于ie10，你也可以阅读有关跨浏览器的内容