为什么[CSS功能]在[浏览器]中工作，但在其他工作？ [英] Why doesn't [CSS feature] work in [browser] but works in others?

查看：121
本文介绍了为什么[CSS功能]在[浏览器]中工作，但在其他工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试在Firefox 15上使用 transition ，它没有工作，即使它在其他版本的Firefox和其他浏览器，如Chrome和Safari工作。



当我使用Firefox的检查器查看属性时，会出现 transition ，并显示属性值无效。 MDN 和 caniuse 说它支持Firefox 4及以上版本！

  #mydiv {
 transition：width 1s; / *我做错了吗？ * / 
 background：＃f00; 
 width：100px; height：100px; 
} 
 #mydiv：hover {width：200px}

属性如 transition 和动画在某些浏览器中工作，在其他浏览器中无效？


免责声明：这是通过添加供应商前缀完全解决的所有问题的规范重复。 Stack Overflow问题应该不是这么广泛，除非在meta上讨论，并且其后创建的规范回答



解决方案

虽然并不总是这样，但是转换或动画的属性的工作原理最常见的原因之一



什么是供应商前缀？

$

b
$ b

在引入Firefox的第4版时，CSS转换模块规范是一个工作草案。在规范确定之前（实际上，这是到达候选建议时），浏览器供应商向属性，值和@ -rules添加供应商前缀，以防止在规范更改时出现兼容性问题。 / p>

供应商前缀正是其名称所描述的 - 供应商特定（供应商意为开发浏览器的公司）前缀的属性或值。对于每个浏览器，它们通常以特定的方式实现，因为属性或值仍处于候选推荐阶段之前的许多实验阶段之一，这是

最常见的情况是：常见的是 -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，旧版Android浏览器，旧版Safari，黑莓浏览器* / 
 -moz-transition：< transition shorthand value> ;; / * Firefox 4-15 * / 
 -o-transition：< transition shorthand value> ;; / *旧歌剧* / 
 transition：< transition shorthand value> / *现代浏览器* / 
}

注意对于 transition ，存在 前缀，但是它只是通过IE10的预发布版本实现，它们不再起作用，需要。



转换



  .foo {
 -webkit-transform：< transform-list> ;; / * Chrome 21-35，Safari，iOS Safari，Opera 22，许多移动浏览器* / 
 -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 {/ *关键帧语法* /} 
 @ -moz-keyframes bar { *关键帧语法* /} 
 @ -o-keyframes bar {/ *关键帧语法* /} 
 @keyframes bar {/ *关键帧语法* /} 
  
 
 
 
 Flexbox 
 
 
 
值也可以加前缀，例如flexbox 。 注意：为了获得最大的浏览器兼容性，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但主要工作）* / 
 display：-ms-flexbox; / * TWEENER  -  IE 10 * / 
显示：-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浏览器* / 
 width：-moz-calc（< mathematical expression>）; / * Firefox< 16 * / 
 width：calc（< mathematical expression>）; / *现代浏览器* / 
} 
  
 
 
 
渐变
 
 
 
有关详细信息，请参见CSS-Tricks的 CSS渐变。
  .foo {
 background-color：< color> / * fallback（可以使用.jpg / .png）* / 
 background-image：url（bar.svg）; / * SVG fallback for IE 9（可以是数据URI，或者可以使用过滤器）* / 
 background-image：-webkit-gradient（linear，left top，right top，from（< color-stop> ，到（< 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（向右，< color-stop>，< color-stop>）; / * Opera 15+，Chrome 25+，IE 10+，Firefox 16+，Safari 6.1+，iOS 7+，Android 4.4+ * / 
} 
  
请注意， left 和到right 方向，从左到右，因此左和到左点 。请参见此答案 
 
 
 
 Border-radius（在大多数情况下不需要）
 
 
 
  .foo {
 -webkit-border-radius：< length | percent> ;; / *或iOS 3.2 * / 
 -moz-border-radius：< length | percent> ;; / * Firefox 3.6和更低版本* / 
 border-radius：< length | percent> ;; 
} 
  
 
 
 
框阴影（在大多数情况下不需要）
 
 
 
  .foo {
 -webkit-box-shadow：" box-shadow shorthand value> ;; / * iOS 4.3和Safari 5.0 * / 
 -moz-box-shadow：< box-shadow shorthand value> / * Firefox 3.6和更低版本* / 
 box-shadow：< box-shadow shorthand value> ;; 
} 
  
 
 
 
如何用JavaScript实现？
 
 
 
要在JavaScript中访问前缀属性和事件，请使用 camelCase 相当于CSS前缀。对于像 foo.addEventListener（'webkitAnimationIteration'，bar）的事件监听器也是如此（ foo 对象，如 document.getElementsById（'foo'））。
  foo.style.webkitAnimation ='< animation shorthand value>'; 
 foo.style.mozAnimation ='< animation shorthand value>'; 
 foo.style.oAnimation ='< animation shorthand value>'; 
  
 
 
 
前缀工具
 
 
 
 在线前缀可能有帮助，但并不总是可靠的。 
 
 
 
  CSS预处理功能
 strong>：
 
 
  
 
 
  JavaScript前缀功能：
 
 
  
 
 
 另请参阅： 为什么浏览器创建供应商CSS属性的前缀？ 
 
I tried using transition on Firefox 15 and it didn't work even though it worked on other versions of Firefox and other browsers like Chrome and Safari. 



When I view the properties using Firefox's inspector the transition is struck through and gives an error of "Invalid property value". MDN and caniuse say it's supported on Firefox 4 and above!
#mydiv {
    transition: width 1s; /* Did I do this wrong? */
    background: #f00;
    width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }

How come sometimes properties like transition and animation work in some browsers and are invalid in others?

  
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 like this one was.




 解决方案 
Though it is not always the case, one of the most common reasons why a property like transition or animation works on some browsers and not others is because of vendor prefixes.



What are vendor prefixes?



At the time version 4 of Firefox was introduced, the CSS transition module specification was a Working Draft. Before a spec is finalized (in practice, this is when it reaches Candidate Recommendation), browser vendors add vendor prefixes to properties, values, and @-rules to prevent compatibility problems in case the spec changes.



Vendor prefixes are exactly what their name describes - a vendor-specific (vendor meaning a company who develops a browser) prefix of a property or value. They are often implemented in a specific way for each browser because the property or value is still in one of the many experimental phases before the Candidate Recommendation stage, which is the stage where they are considered implementation-ready.



The most common ones are -moz- (Mozilla Firefox), -webkit- (Chrome, Safari, etc.), and -ms- (Microsoft Internet Explorer), but there are more.



When do I need to use them?



That depends completely on what browsers you're looking to serve, what properties and values you're using, and at what point in time you are developing your website. There are sites that try to keep a current list but they are not always accurate or kept up-to-date. 



Following are some of the most commonly prefixed properties and values. If your project does not supporting the browsers mentioned in the comment to the right of the property, then there is no need to include it in your CSS.



Transitions



An unprefixed property sometimes has prefixed equivalents, such as -webkit-transition.



In order to get full possible browser support, the following is necessary:
.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 */
}

Note that an -ms- prefix exists for transition, however it was only implemented by pre-release versions of IE10 which are no longer functional, and it is therefore never needed. It is implemented unprefixed in IE10 RTM and newer.



Transforms



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




Animations



Animations need to have the property prefixed and the corresponding keyframes prefixed, like so:
.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



Values can also be prefixed, as in the case of flexbox. Note: For maximum browser compatibility, flexbox-specific properties like ordinal-group, flex-flow, flex-direction, order, box-orient, etc. need to be prefixed in some browsers in addition to the following:
.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 */
}




Gradients



See CSS Gradients on CSS-Tricks for more information.
.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+ */
}

Note that left and to right represent the same direction, left-to-right, and therefore left and to left point opposite ways. See this answer for some background info.



Border-radius (Not needed in most cases)



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




Box shadow (Not needed in most cases)



.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>;
}




How can they be implemented with JavaScript?



To access prefixed attributes and events in JavaScript, use the camelCase equivalent of the CSS prefix. This is true for event listeners like foo.addEventListener('webkitAnimationIteration', bar ) as well (foo being  a DOM object, like document.getElementsById('foo')).
foo.style.webkitAnimation = '<animation shorthand value>';
foo.style.mozAnimation = '<animation shorthand value>';
foo.style.oAnimation = '<animation shorthand value>';




Prefixing tools



Online prefixers can be helpful but are not always reliable. Always make sure to test your project on the devices you wish to support to make sure that each has the appropriate prefix included.



CSS Pre-processor functions: 





JavaScript prefixer functions:





See also: Why do browsers create vendor prefixes for CSS properties?


                        
这篇关于为什么[CSS功能]在[浏览器]中工作，但在其他工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆