我有一个jQuery图像滚动器,它使用perpective
和transform: translateZ
CSS属性来模拟深度。它可以在Chrome中正确呈现,但不能在IE10或Firefox中呈现。
这是完整的元素(单击“谁来了”菜单链接以查看图像滚动器):
http://www.girlguiding.org.uk/test/biggig/index.html
这是相关代码的jsFiddle:
http://jsfiddle.net/moosefetcher/rxCMr/28/
(我不确定为什么,但是stackoverflow告诉我我需要包括链接到jsFiddle的代码,所以这是CSS)...
.scroller {
position: relative;
perspective: 150;
-webkit-perspective: 150;
-ms-perspective: 150;
-moz-perspective: 150;
}
.artistBox {
width: 228px;
height: 268px;
background-color: #000000;
border-radius: 16px;
position: absolute;
overflow: hidden;
z-index: 4;
}
.artistBox p {
position: absolute;
font-family:"Arial", sans-serif;
color: white;
font-size: 22px;
}
.artistBoxFront {
z-index: 5;
}
.artistBoxNew {
z-index: 3;
opacity: 0;
}
.scrollerButton {
position: absolute;
top: 128px;
width: 32px;
height: 32px;
border: 2px solid white;
border-radius: 32px;
background-color: #F49D19;
box-shadow: 1px 1px 3px #555588;
z-index: 6;
}
.scrollerButtonOver {
background-color: #ffaa26;
box-shadow: 2px 2px 3px #555588;
}
请注意,我已经尝试过在属性上同时包括AND和
-ms-
前缀。 (当前的jsFiddle包括-webkit-
和-moz-
)。有人知道为什么这可能无法在IE10中使用吗?
干杯。
最佳答案
长度单位
IE和Firefox在perspective
值(px
,em
)上要求长度单位。
-moz-perspective: 800px;
perspective: 800px;
对于Chrome和Safari,使用
-webkit
前缀时,长度单位是可选的。-webkit-perspective: 800; /* This works with or without the px unit */
W3C标准
向所有
perspective
值添加长度单位更安全。它与W3C standard更加一致。这是所有浏览器都支持的一种方法。一旦Chrome和Safari开始支持不带前缀的perspective
,它们就有可能需要一个长度单位(为了与W3C标准和其他浏览器保持一致)。-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
注意:有关w3schools.com的当前信息已过时。没有提及对IE10或Firefox的支持,并且它们的示例没有长度单位。 developer.mozilla.org上最近的示例包括一个长度单位,与W3C标准一致。