CSS过渡在IE中不起作用 [英] CSS transition not working in IE

问题描述

我无法在IE或Firefox中进行此转换，在Safari和Chrome中看起来还不错。
不透明显示出来，但是是即时的。

对我来说，下面的CSS看起来很正确，我看不到它在IE或Firefox中都能工作的任何原因。
我已经使用-ms-transition进行了尝试，并且产生了相同的结果，但是该站点仍然使用CSS3，因此无论如何我阅读的内容都不需要-ms-。


任何可以散发出的光将不胜感激！

Ben

I cant get this transition working in IE or Firefox, It looks fine in Safari and Chrome. The opacity shows but is instant.
To me the below CSS looks right and I can't see any reason that it would work in either IE or firefox.
I've tried this using -ms-transition and it yields the same results, but the site uses CSS3 anyway so shouldn't need the -ms- anyway from what I've read.
Any light that can be shed would be greatly appreciated!
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>

推荐答案

CSS转换是在IE9或更低版本中不支持。 IE10支持它们，但是您包含的CSS在IE10中可以正常工作。

CSS Transitions are not supported in IE9 or lower. They are supported in IE10, however, and the CSS you've included does work correctly in IE10.

我只能假设您使用的是IE9标准的IE10进行测试这就是为什么过渡无法正常工作的原因。要更改此设置，只需将IE的文档模式设置为标准：

I can only assume you're using IE10 with IE9 standards to test this, which is why the transition isn't working. To change this, simply set IE's Document Mode to Standards:

还应注意，您应始终在预期CSS属性之前在之前包含供应商前缀。例如，在 -webkit-transition 之前指定 transition 会告诉基于WebKit的浏览器使用前缀版本而不是实际版本，每个版本的处理方式可能有所不同。将CSS更改为：

It's also worth noting that you should always include vendor prefixing before the intended CSS property. Specifying transition before -webkit-transition, for instance, will tell WebKit-based browsers to use the prefixed version instead of the actual version, and there may be differences in how each are handled. Change your CSS to:

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

这篇关于CSS过渡在IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！