尽管添加了 -ms-，但 CSS3 功能在 IE 中不起作用答案

【问题标题】：CSS3 feature doesn't work in IE in spite of adding -ms-尽管添加了 -ms-，但 CSS3 功能在 IE 中不起作用
【发布时间】：2014-05-09 08:21:43
【问题描述】：

这是我添加到我的网站的 CSS。它适用于 firefox 和 Chrome，但不适用于 internet explorer。 W3C 说这些 css 功能应该在 IE 中正确处理。 IE 可以处理transform-origin and transform-style，但不能在这里处理。

 a
{
color: #03c;
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;}

a span
{
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
-ms-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;}

a:hover span 
{
background: #03c;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

a span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;
color: #fff;
background: #03c;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-o-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

【问题讨论】：

"W3C 说这些 css 功能应该在 IE 中正确处理。"真的吗？它在哪里说呢？此外，浏览器不会神奇地通过添加适当的前缀来支持某些东西。
IE 11. 最新版本。您输入 transform-origin 和 transform-style 并查看 W3C 对支持的浏览器的评价

标签： css internet-explorer stylesheet

【解决方案1】：

Internet Explorer 9 使用供应商前缀 -ms-，尽管 -ms- 在 Internet Explorer 10 和稍后。

【讨论】：

【解决方案2】：

ms-transform-origin 在 IE 9 中受支持，transform-origin 在 IE10 中受支持。低版本根本不支持。

也可以看看IE Dev Center

编辑：

也许看看 SO 上的this question

【讨论】：

我使用的是 IE 11.0.7，所以它必须支持它，但你自己尝试一下，在这种情况下不起作用