CSS 透视图在 Internet Explorer 10 或 Firefox 中不起作用答案

【问题标题】：CSS perspective not working in Internet Explorer 10 or FirefoxCSS 透视图在 Internet Explorer 10 或 Firefox 中不起作用
【发布时间】：2013-03-27 20:56:27
【问题描述】：

我有一个 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;
}

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

【问题讨论】：

不知道这是否算作“颠簸”，但我刚刚发现 IE10 在开发人员工具的“怪癖”模式选项中正确渲染了上述 3D。有谁知道为什么会这样？如果这是一个有用的启示？
quirks 模式下的 IE10 不太符合标准。它可能允许没有所需长度单位的长度值（默认情况下假设为px）。

标签： css firefox transform internet-explorer-10 perspective

【解决方案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 standard 更加一致。这是所有浏览器都支持的一种方法。一旦 Chrome 和 Safari 开始支持不带前缀的 perspective，它们可能需要一个长度单位（为了与 W3C 标准和其他浏览器保持一致）。

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

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

【讨论】：

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

【解决方案2】：

它不起作用，因为没有 WebKit 浏览器会丢弃透视属性。该属性要么接受none，要么接受一个长度值。长度需要一个单位，除非值是 0。如果你添加一个单位，比如 px，它在 IE 和 Firefox 中有效。

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

我删除了 -ms- 属性，因为在最终版本中没有前缀添加到 IE10 中。我最后还移动了无前缀版本，以便它胜过有前缀的版本。

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

【讨论】：

太棒了！能不能接受我的回答？编辑：没关系。刚刚看到别人也回复了。
是的，抱歉 - 仍然不能 100% 确定这里的礼仪，但我认为其他答案更详细一些。

【解决方案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 有其他关系，但要点是：检查 您的视角设置在哪个选择器上。

【讨论】：