CSS透视在Internet Explorer 10或Firefox中无法工作

Question

我有一个jQuery图像滚动器，使用perspective和transform：translateZ CSS属性模拟深度。在Chrome中可以正确呈现，但在IE10或Firefox中不能。

这是完整的项目（点击“Who's coming”菜单链接以查看图像滚动器）：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;
}

注意，我已经尝试了包含和不包含-ms-前缀的属性。（当前的jsFiddle包括-webkit-和-moz-以及两者。） 有人知道为什么这在IE10中可能不起作用吗？ 干杯。

- moosefetcher

---

不知道这是否算作“顶贴”，但我刚刚发现IE10在开发者工具的“怪异模式”选项下可以正确渲染上述3D。有人知道为什么吗？如果这是一个有用的发现，那会怎样呢？ - moosefetcher

在 quirks 模式下，IE10 的标准兼容性较差。它可能允许使用没有必需长度单位的长度值（并默认假定为 px）。 - Matt Coughlin

Answer 1

长度单位

在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标准，也是所有浏览器支持的方法。一旦Chrome和Safari开始无需前缀支持perspective，它们可能会要求添加长度单位（为了与W3C标准和其他浏览器保持一致）。

-webkit-perspective: 800px;
   -moz-perspective: 800px;
        perspective: 800px;

注意：目前在w3schools.com上的信息已经过时。没有提到对IE10或Firefox的支持，并且他们的示例没有长度单位。在developer.mozilla.org上更新的示例包括一个长度单位，符合W3C标准。

- Matt Coughlin

---

我向W3Schools提交了一个错误报告：也许他们会修复它。他们的示例没有为任何变量指定单位。 - Tatiana Racheva

Answer 2

这段代码无法正常工作，因为没有任何一个WebKit浏览器支持perspective属性。该属性只接受none或长度值。长度需要使用单位，除非值为0。如果添加单位，如px，则在IE和Firefox中可以正常工作。

参见http://jsfiddle.net/rxCMr/31/

我删除了-ms-属性，因为在最终版本的IE10中添加了不带前缀的perspective属性。我还将未加前缀的版本放在最后，以便它胜过加了前缀的版本。

我不确定为什么它在WebKit中能够工作。它应该像Firefox和IE一样删除该属性，但我想它正在进行错误恢复。

- David Storey

---

太好了！能否采纳我的答案？编辑：没关系。我刚看到还有其他人回答了。 - David Storey

是的，抱歉 - 我仍然不太确定这里的礼仪，但我认为另一个答案更详细一些。 - moosefetcher

Answer 3

我正在使用Matthew Wagerfield的ParallaxJS和perspective: 4000px，但在IE10/11中仍然无法正常工作，而在Chrome和Firefox中完全没有问题。

标记

<ul class="container">
    <li class="layer">...</li>
    <li class="layer">...</li>
    <li class="layer">...</li>
</ul>

在 .container 上定义 perspective: 4000px 对于 FF 和 Chrome 是可以的，但只有在 .layer 上定义时才能在 IE 中正常工作。所以可能要检查一下。这可能与我设置的众多 transform-style: preserve-3d || flat 有关，但要点是：检查你的透视是在哪个选择器上设置的。

- robro