CSS3功能在IE中不起作用，儘管增加了-ms-

這是我添加到我的網站的CSS。它在Firefox和Chrome工作，但不工作在Internet Explorer。 W3C說這些CSS功能應該在IE中正確處理。 IE可以處理transform-origin and transform-style但不在這裏。CSS3功能在IE中不起作用，儘管增加了-ms-

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); 
}

來源

2014-05-09 Conspiria

什麼版本的ie？ –

「W3C表示這些CSS功能應該在IE中正確處理。」真？它在哪裏說呢？另外，瀏覽器並不會奇蹟般地通過向它添加適當的前綴來支持某些東西。 – BoltClock

IE 11.最新版本。你輸入了transform-origin和transform-style，看看W3C關於支持的瀏覽器的說法 – Conspiria

看看Internet Explorer 9的使用供應商前綴-ms-，雖然- ms-已在Internet Explorer 10及更高版本中棄用。

來源

2014-05-09 08:36:57 BenEgan1991

ms-transform-origin在IE 9，transform-origin在IE10被支撐。低版本根本不支持它。

也看看IE Dev Center

編輯：

也許在this question上SO

來源

2014-05-09 08:33:01 janatuerlich

我使用的是IE 11.0.7，所以它必須支持它，但是你自己試一下，那在那種情況下不起作用 – Conspiria

CSS3功能在IE中不起作用，儘管增加了-ms-

回答

相關問題