CSS转换在IE中不起作用。

Question

我无法让这个过渡在IE或Firefox中起作用，它在Safari和Chrome中看起来很好。透明度显示但是瞬间出现。
对我而言下面的CSS看起来没问题，而且我看不出为什么它会在IE或Firefox中工作。
我尝试使用-ms-transition，但结果相同，但站点已经使用CSS3，所以从我阅读的内容来看，不应该需要-ms-。
任何能提供帮助的信息都将不胜感激！
Ben

CSS:

.XMABAN {   
    height: 153px;  
    width: 230px;  
    background-color:rgb(127,0,25);  
    padding: 0;  
    vertical-align: top;  
}

.XMABAN a {  
    height: 153px;  
    width: 230px;  
    text-decoration:none;  
}

.XMABAN a:hover         {   
    text-decoration:none;   
}

.XMABAN img             {   
    opacity: 1;  
    transition: opacity 0.70s ease-in-out;   
    -moz-transition: opacity 0.70s ease-in-out;  
    -webkit-transition: opacity 0.70s ease-in-out; 
    -o-transition: opacity 0.70s ease-in-out; 
}

.XMABAN a:hover img     {   
    opacity: 0.30;  
    transition: opacity 0.25s ease-in-out;  
    -moz-transition: opacity 0.25s ease-in-out;  
    -webkit-transition: opacity 0.25s ease-in-out;  
    -o-transition: opacity 0.25s ease-in-out;  
}

.XMABAN span            {   
    position: relative;  
    left: 0%;  
    top: -62%;  
    font-weight:bold;  
    font-size:20pt;  
    color:#404040;  
    transition: color 0.70s ease-in-out;  
    -moz-transition: color 0.70s ease-in-out;  
    -webkit-transition: color 0.70s ease-in-out;  
    -o-transition: color 0.70s ease-in-out;  
}

.XMABAN a:hover span    {   
    color:#FFF0F5;  
    transition: color 0.25s ease-in-out;  
    -moz-transition: color 0.25s ease-in-out;  
    -webkit-transition: color 0.25s ease-in-out;  
    -o-transition: color 0.25s ease-in-out;  
}

HTML:

<tr>
    <td style="width: 33%;">
        <div class="XMABAN" style="margin: 10px 0px 5px 0px;">
            <a class="DSPI" href="online.asp">
                <img src="../images/PRM_220.jpg">
                <span>TEXT</span>
            </a>
        </div>
    </td>
</tr>

- b_en

---

顺便提一下，看看IE的版本。为了避免添加供应商前缀，请查看prefixfree。 - Patsy Issa

抱歉，可能有所帮助！我已经在IE10和IE9中检查过了，结果都是一样的。 - b_en

你能在 JSFiddle 上重新创建一下吗？ - Patsy Issa

CSS过渡效果在IE9中不被支持，因此在IE9中无法正常工作。它们在IE10中得到了支持（无需前缀），所以是的，应该可以正常工作，但您应该检查浏览器模式，因为如果处于兼容模式或怪异模式下，该功能将被禁用。 - Spudley

http://jsfiddle.net/2fLTU/ 这在IE 10中运行良好，请查看。 - Anobik

看起来页面上有一些东西正在覆盖CSS。我让它在所有浏览器中工作了大约5分钟，但是刷新一次后，在IE10中它就不再工作了！不过，在改变webkit的位置后，Firefox现在可以正常工作了。谢谢James！浏览器模式肯定是IE10，所以之前可能漏掉了什么。我会继续寻找！ - b_en

Answer 1

CSS过渡效果在IE9或更低版本中不支持。但在IE10中有支持，所以您所包含的CSS在IE10中可以正常使用。

我只能假设您正在使用采用IE9标准的IE10进行测试，这就是为什么过渡效果不能正常工作的原因。要更改这个设置，只需将IE的文档模式设置为“标准”即可：

值得注意的是，在预定的CSS属性之前，您应该始终包括厂商前缀。例如，先指定-webkit-transition后再指定transition将告诉基于Webkit的浏览器使用带前缀的版本而不是实际版本，每个版本处理方式可能有所不同。请将您的CSS更改为：

-moz-transition: ...;
-webkit-transition: ...;
-o-transition: ...;
transition: ...;

- James Donnelly