为什么 [CSS 功能] 在 [浏览器] 中不起作用，但在其他浏览器中起作用？

我尝试使用transition在 Firefox 15 上，它不起作用，即使它可以在其他版本的 Firefox 以及 Chrome 和 Safari 等其他浏览器上运行。

当我使用 Firefox 的检查器查看属性时transition被删除并给出“无效属性值”的错误。MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions and caniuse http://caniuse.com/#search=transition据说 Firefox 4 及以上版本支持它！

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

为什么有时属性像transition and animation在某些浏览器中有效而在其他浏览器中无效？

免责声明：这是所有可通过添加供应商前缀完全解决的问题的规范副本。堆栈溢出问题应该not除非在元上讨论以及此后创建的规范答案，否则会如此广泛就像这个 https://meta.stackoverflow.com/questions/267634/what-to-do-with-css-prefix-questions.

尽管情况并非总是如此，但像这样的房产最常见的原因之一是transition or animation可以在某些浏览器上运行，而不能在其他浏览器上运行，这是因为供应商前缀.

什么是供应商前缀？

在 Firefox 版本 4 推出时，CSS 转换模块规范还是一个工作草案。在规范最终确定之前（实际上，这是当它达到候选推荐值时），浏览器供应商添加供应商前缀属性、值和 @-rules，以防止规范更改时出现兼容性问题。

供应商前缀正如其名称所描述的那样 - 属性或值的特定于供应商（供应商意味着开发浏览器的公司）前缀。它们通常针对每个浏览器以特定方式实现，因为属性或值仍处于候选推荐阶段之前的许多实验阶段之一，即他们被认为已准备好实施的阶段 https://stackoverflow.com/questions/19994770/why-are-there-vendor-prefixes-in-css3/19995110#19995110.

最常见的是-moz-（火狐浏览器），-webkit-（Chrome、Safari 等），以及-ms-（微软 Internet Explorer），但是还有更多 https://stackoverflow.com/q/5411026/3890059.

我什么时候需要使用它们？

这完全取决于您想要提供服务的浏览器、您正在使用的属性和值以及您在什么时间点开发网站。有一些网站尝试保留当前列表 http://peter.sh/experiments/vendor-prefixed-css-property-overview/但它们并不总是准确或保持最新。

以下是一些最常见的前缀属性和值。如果您的项目不支持属性右侧注释中提到的浏览器，则无需将其包含在 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 */
}

请注意，-ms-前缀存在于transition，但是它仅由 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>;
}

动画

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

.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 */ }

Flexbox

值也可以带有前缀，例如flexbox https://stackoverflow.com/tags/flexbox/info. Note：为了获得最大的浏览器兼容性，Flexbox 特定的属性，例如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>;
}

Calc

.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 */
}

渐变

See CSS 渐变 http://css-tricks.com/css3-gradients/有关更多信息，请参阅 CSS-Tricks。

.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 and to right代表相同的方向，从左到右，因此left and to left point opposite方法。看这个答案 https://stackoverflow.com/questions/19486680/are-top-and-to-top-the-same-direction-for-linear-gradients/19488034#19488034一些背景信息。

边界半径（大多数情况下不需要）

.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 中的前缀属性和事件，请使用骆驼香烟盒 https://en.wikipedia.org/wiki/CamelCase相当于 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 属性前缀 http://www.stefanwienert.de/blog/2012/05/18/easy-css-vendor-prefix-mixin-for-sass/
• LESS 属性前缀 https://github.com/JoelSutherland/LESS-Prefixer

JavaScript 前缀函数:

• -CSS 属性和值无前缀 http://leaverou.github.io/prefixfree/
• 事件前缀 http://www.sitepoint.com/css3-animation-javascript-event-handlers/

也可以看看： 为什么浏览器要为 CSS 属性创建供应商前缀？ https://stackoverflow.com/q/8131846/3890059