CSS 过渡在 IE 中不起作用答案

【问题标题】：CSS transition not working in IECSS 过渡在 IE 中不起作用
【发布时间】：2013-11-19 01:44:08
【问题描述】：

我无法在 IE 或 Firefox 中进行此转换，但在 Safari 和 Chrome 中看起来不错。不透明度显示但即时。
对我来说，下面的 CSS 看起来不错，我看不出它可以在 IE 或 Firefox 中运行的任何理由。
我已经尝试过使用 -ms-transition 并产生相同的结果，但是该站点无论如何都使用 CSS3，因此从我读过的内容来看，无论如何都不应该需要 -ms- 。
任何可以散发的光都将不胜感激！
本

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>

【问题讨论】：

什么版本的 IE，旁注看一下prefixfree，以避免添加供应商前缀。
对不起，可能有帮助！我已经在 IE10 和 IE9 中签入了相同的结果。
嗯，你能用小提琴重新创建它吗？
CSS 过渡在 IE9 中不支持，因此它在 IE9 中永远无法工作。 IE10 支持它们（不需要前缀），所以是的，这应该可以工作，但你应该检查你的浏览器模式，因为如果它处于兼容模式或怪癖模式，该功能将被禁用。
jsfiddle.net/2fLTU 这在 ie 10 中运行良好，看看

标签： html css internet-explorer css-transitions

【解决方案1】：

CSS 过渡是not supported in IE9 or lower。但是，它们在 IE10 中受支持，并且您包含的 CSS 在 IE10 中可以正常工作。

我只能假设您使用 IE10 和 IE9 标准来测试这一点，这就是转换不起作用的原因。要改变这一点，只需将 IE 的 Document Mode 设置为 Standards：

另外值得注意的是，您应该始终在预期的 CSS 属性之前添加供应商前缀之前。例如，在-webkit-transition 之前指定transition 将告诉基于WebKit 的浏览器使用前缀版本而不是实际版本，并且每个处理方式可能存在差异。将您的 CSS 更改为：

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

【讨论】：