为什么[CSS功能]不能在[浏览器]中工作,但在其他的工作？

我尝试在Firefox 15上使用转换，即使在其他版本的Firefox和其他浏览器(如Chrome和Safari)上也可以使用它。

当我使用Firefox的检查器查看属性时，会发生转换，并发出“无效的属性值”错误。 MDN和caniuse表示Firefox 4及以上版本支持！

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

某些浏览器中的转换和动画有时属性如何工作，在其他浏览器中无效？

Disclaimer: This is the canonical duplicate for all questions solvable completely by adding vendor prefixes. Stack Overflow questions should not be this broad unless discussed on Meta and a canonical answer created thereafter 07002.

解决方法

虽然并不总是这样，但是在某些浏览器而不是其他浏览器上运行转换或动画的属性最常见的原因之一是因为供应商的前缀。

什么是供应商前缀？

在Firefox的第4版引入时，CSS转换模块规范是工作草案。在规范定稿之前(实际上，当它达到候选建议时)，浏览器厂商会在属性，值和@ -rules中添加供应商前缀，以防止在规范更改的情况下出现兼容性问题。

供应商前缀正是他们的名字所描述的 – 供应商特定的(供应商意思是开发浏览器的公司)前缀的属性或价值。它们通常以每种浏览器的特定方式实现，因为属性或值仍然是候选推荐阶段(即the stage where they are considered implementation-ready)之前的许多实验阶段之一。

最常见的是-moz-(Mozilla Firefox)，-webkit-(Chrome，Safari等)和-ms-(Microsoft Internet Explorer)，但是there are more。

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

这完全取决于您正在寻找的浏览器，您正在使用的是什么属性和值，以及您在何时开发您的网站。有try to keep a current list的网站，但它们并不总是准确或保持最新。

以下是一些最常用的前缀属性和值。如果您的项目不支持属性右侧注释中提到的浏览器，则不需要将其包含在CSS中。

转变

未校正的属性有时具有前缀等价物，例如-webkit转换。

为了获得完整的浏览器支持，需要以下内容：

.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-前缀，但是它仅由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 */ }

FlexBox的

值也可以作为flexbox的前缀。注意：为了最大限度地提高浏览器的兼容性，需要以flexant-group，flex-flow，flex-direction，order，Box-orient等特定于FlexBox的属性为前缀一些浏览器除了以下内容之外：

.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 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>); /* Firefox 3.6 - 15 */
    background-image: -o-linear-gradient(left,<color-stop>); /* Opera 11.1 - 12 */
    background-image: linear-gradient(to right,<color-stop>); /* Opera 15+,Chrome 25+,IE 10+,Firefox 16+,Safari 6.1+,iOS 7+,Android 4.4+ */
}

请注意，从左到右分别表示相同的方向，从左到右，因此左右相对。有关背景信息，请参阅this answer。

边框半径(大多数情况下不需要)

.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前缀的camelCase。对于诸如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 properties prefixer
> LESS properties prefixer

JavaScript前缀函数：

> -prefix-free for CSS properties and values
> Event prefixer

参见：Why do browsers create vendor prefixes for CSS properties?

为什么[CSS功能]不能在[浏览器]中工作,但在其他的工作？

解决方法

猜你在找的CSS相关文章