3

我无法在 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>
4

1 回答 1

4

IE9 或更低版本不支持CSS 过渡。但是，它们在 IE10 中受支持，并且您包含的 CSS 在 IE10 中确实可以正常工作。

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

IE 演示

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

-moz-transition: ...;
-webkit-transition: ...;
-o-transition: ...;
transition: ...;
于 2013-11-07T12:19:06.283 回答