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屋!