为什么在某些浏览器中 [CSS feature] 无法正常工作，而在其他浏览器中可以？

Question

我尝试在Firefox 15上使用transition，但它不起作用，即使在其他版本的Firefox和像Chrome和Safari这样的其他浏览器中也可以工作。

当我使用Firefox的检查器查看属性时，transition被划掉，并显示“无效的属性值”错误。 MDN 和 caniuse 声明它支持Firefox 4及以上版本！

#mydiv {
    transition: width 1s; /* Did I do this wrong? */
    background: #f00;
    width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }

为什么有些浏览器支持诸如transition和animation等属性，而其他浏览器则无效？

免责声明：此处为可通过添加供应商前缀完全解决的所有问题的标准副本。除非在元讨论并创建了专用答案（例如此处），否则Stack Overflow问题不应如此广泛。

- bjb568

---

@JukkaK.Korpela，我认为你不理解“规范重复”的含义。规范重复是一种用于关闭其他问题的工具。它是有意制作的重复且非常广泛。Javascript标签是用于JavaScript供应商前缀的。这不是一个普通的问答环节，标签和标题是为了回答的可见性而非问题本身。 - bjb568

这个不应该变成社区维基页面吗？ - 11684

这不仅适用于CSS属性吗？如果是这样，那么标题中的[feature]可以替换为类似[css feature]的内容。现在，这个问题的标题让它看起来比实际要广泛得多。 - Ajedi32

我可以建议将标题从“为什么在[browser]中无法使用[feature]？”更改为“为什么在其他浏览器中可以使用，但在[browser]中无法使用[feature]？”或类似的内容吗？这样会更清晰/不那么宽泛。 - TylerH

通过@ZachSaucier的编辑，我认为可以重新打开这个问题，因为问题包含一条注释，告诉人们这个问题是故意宽泛的。 - Some Guy

Answer 1

虽然并非总是如此，但一个属性（如transition或animation）在某些浏览器上工作而在其他浏览器上不工作的最常见原因之一是由于供应商前缀。

什么是厂商前缀?

在 Firefox 4 版本引入之时，CSS 过渡模块规范还处于工作草案状态。实际上，在规范定稿之前（通常是它达到候选推荐阶段），浏览器厂商会向属性、值和 @-规则添加 供应商前缀，以防止兼容性问题，万一规范发生变化。

供应商前缀正是它们名称描述的东西 - 属性或值的供应商特定前缀。它们通常为每个浏览器以特定方式实现，因为属性或值仍处于许多实验阶段（即候选推荐阶段之前），而该阶段是 考虑实现就绪的阶段。

最常见的前缀是 -moz- (Mozilla Firefox)、-webkit- (Chrome、Safari 等) 和 -ms- (Microsoft Internet Explorer)，但还有更多。

何时需要使用它们?

这完全取决于您要服务的浏览器、您使用的属性和值以及您在开发网站的哪个阶段。有些网站试图保持当前列表，但它们并不总是准确或及时更新。

以下是一些最常见的前缀属性和值。如果您的项目不支持右侧评论中提到的浏览器，则无需在 CSS 中包含它。

过渡

无前缀的属性有时具有前缀等效项，例如-webkit-transition。

为了获得最佳的浏览器支持，请参照以下内容:

.foo {
    -webkit-transition: <transition shorthand value>; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */
    -moz-transition: <transition shorthand value>;    /* Firefox 4-15 */
    -o-transition: <transition shorthand value>;      /* Old opera */
    transition: <transition shorthand value>;         /* Modern browsers */
}

请注意，在transition中存在一个-ms-前缀，但它仅在早期版本的IE10中实现，这些版本已不再可用，因此永远不需要使用。它在IE10 RTM及更高版本中以无前缀方式实现。

转换

.foo {
    -webkit-transform: <transform-list>; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */
    -ms-transform: <transform-list>;     /* IE9 */
    transform: <transform-list>;
}

动画

动画需要添加前缀属性和相应的关键帧前缀，如下所示：

.foo {
  -webkit-animation: bar; /* Safari 4+ */
  -moz-animation: bar;    /* Fx 5+ */
  -o-animation: bar;      /* Opera 12+ */
  animation: bar;         /* IE 10+, Fx 16+ */
}

@-webkit-keyframes bar { /* Keyframes syntax */ }
@-moz-keyframes bar { /* Keyframes syntax */ }
@-o-keyframes bar { /* Keyframes syntax */ }
@keyframes bar { /* Keyframes syntax */ }

弹性盒模型

在类似 弹性盒模型 的情况下，值也可以添加前缀。注意：为了实现最大的浏览器兼容性，在某些浏览器中需要额外添加像 ordinal-group、flex-flow、flex-direction、order、box-orient 等特定于弹性盒子模型的属性的前缀。

.foo {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-flex: <flex shorthand value>;
    -moz-box-flex: <flex shorthand value>;
    -webkit-flex: <flex shorthand value>;
    -ms-flex: <flex shorthand value>;
    flex: <flex shorthand value>;
}

计算

.foo {
    width: -webkit-calc(<mathematical expression>); /* Chrome 21, Safari 6, Blackberry browser */
    width: -moz-calc(<mathematical expression>);    /* Firefox <16 */
    width: calc(<mathematical expression>);         /* Modern browsers */
}

渐变

请参考CSS-Tricks上的CSS渐变文档以获取更多信息。

.foo {
    background-color: <color>; /* Fallback (could use .jpg/.png alternatively) */
    background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */  
    background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */  
    background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */  
    background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>); /* Firefox 3.6 - 15 */
    background-image: -o-linear-gradient(left, <color-stop>, <color-stop>); /* Opera 11.1 - 12 */
    background-image: linear-gradient(to right, <color-stop>, <color-stop>); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
}

请注意，left和to right表示同一方向，即从左到右，因此left和to left指向相反的方向。有关一些背景信息，请参见此答案。

border-radius（在大多数情况下不需要）

.foo {
    -webkit-border-radius: <length | percentage>; /* or iOS 3.2 */
    -moz-border-radius: <length | percentage>;    /* Firefox 3.6 and lower */
    border-radius: <length | percentage>;
}

盒子阴影（大多数情况下不需要）

.foo {
    -webkit-box-shadow: <box-shadow shorthand value>; /* iOS 4.3 and Safari 5.0 */
    -moz-box-shadow: <box-shadow shorthand value>;    /* Firefox 3.6 and lower */
    box-shadow: <box-shadow shorthand value>;
}

如何使用JavaScript实现这些功能？

要在JavaScript中访问带前缀的属性和事件，请使用CSS前缀的驼峰命名法相对应的名称。这也适用于事件监听器，例如foo.addEventListener('webkitAnimationIteration', bar)（其中foo是DOM对象，例如document.getElementsById('foo')）。

foo.style.webkitAnimation = '<animation shorthand value>';
foo.style.mozAnimation = '<animation shorthand value>';
foo.style.oAnimation = '<animation shorthand value>';

前缀工具

在线前缀工具可能有帮助，但不总是可靠的。始终确保在您希望支持的设备上测试项目，以确保每个设备都包含适当的前缀。

CSS 预处理器函数:

• SASS 和 SCSS 属性前缀
• LESS 属性前缀

JavaScript 前缀函数:

• -prefix-free 用于 CSS 属性和值
• 事件前缀

另请参阅: 为什么浏览器会为 CSS 属性创建供应商前缀？

- bjb568

---

这是对问题标题所问的大多数不正确的答案。它是一个不必要的长、难以理解和讲授式的回答，与问题正文所问的内容无关（并且回答了根本没有被问到的问题）。问题主要在于“问题”本身，但如果问题和这个答案都要说，我认为这个错误需要被指出。 - Jukka K. Korpela

个人而言，我不认为这是一个错。"最常见的原因之一"确实是一个正确的答案，即使是对于标题所述问题如此广泛的问题。这就是为什么存在这个问题和答案匹配的原因。这个答案的部分涉及到问题正文中给出的例子，尽管代码不匹配。而且，“回答根本没有问到的问题”始终是可以接受的，只要这些假设性问题与手头主要问题相关 - 这是使一个好答案变成一个好极了答案的一部分。 - BoltClock

有没有确凿的证据表明供应商前缀是问题的主要原因？无论如何，仅涉及一种可能原因的冗长答案是不够充分的。而且，供应商前缀并不是真正的“原因”。当标准或提议的属性或值缺乏支持时，这只是关于支持的一个简单事实。供应商前缀只是部分地解决了某些意义上的问题，而不是原因。 - Jukka K. Korpela

确实，最后一部分应该在答案中进行澄清。 - BoltClock