为什么这个 css 在 Firefox 和 ie11 中不起作用？答案

【问题标题】：Why is this css not working in firefox and ie11?为什么这个 css 在 Firefox 和 ie11 中不起作用？
【发布时间】：2014-03-17 22:21:48
【问题描述】：

我正在尝试通过以下方式更改 woocommerce 中的按钮颜色：

#top .button, #top .submitbutton {
text-shadow: none!important; 
color: white!important;
font-weight: bold; !important; 
background: -webkit-gradient(linear, left top, left bottom, from(#6FB56F),        to(#0D850D))!important;

它在 chrome 中运行良好，但在 ie11 和 firefox 中无法运行。非常感谢所有答案

【问题讨论】：

-webkit- 仅适用于 Webkit，包括 Safari/Chrome/Opera15+ 您还应该为 gradient 属性添加其他供应商前缀。

标签： css internet-explorer firefox

【解决方案1】：

如果只有背景不起作用，则需要定义 Web 浏览器特定的渐变：

即举个例子：

#grad
{
  background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, blue); /* Standard syntax */
}

将允许渐变在这些浏览器上工作。

见here for details

【讨论】：

你的“标准语法”是错误的，不需要供应商前缀。
@NiettheDarkAbsol 语法是绝对正确的jsfiddle.net/7xTVQ，除非您想按照自己的方式定义方向
嗯，很公平。不过，最好定义方向：p
@NiettheDarkAbsol 同意。清楚地定义你想要什么总是比让浏览器假设默认值更好。由于您已定义所有参数，因此当浏览器升级/更改时，它有助于解决意外行为。

【解决方案2】：

做渐变的正确方法是：

background-image: linear-gradient(to bottom, #5FB56F, #0D850D);

【讨论】：

【解决方案3】：

-webkit 仅适用于 Safari/Chrome/Opera。
对于 Firefox，使用 -moz，对于 IE9，使用 -ms。

【讨论】：

【解决方案4】：

  background-image: -webkit-linear-gradient(); /* Chrome and Safari */
  background-image:    -moz-linear-gradient(); /* Old Firefox (3.6 to 15) */
  background-image:     -ms-linear-gradient(); /* Pre-releases of IE 10 */
  background-image:      -o-linear-gradient(); /* Old Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(); /* Standard syntax; Works best if last */

【讨论】：

当然还有background-image: linear-gradient()。
应该注意的是，标准语法不一定要放在最后，假设您要定义相同的渐变。
@NiettheDarkAbsol 如果浏览器同时支持有缺陷的供应商前缀和标准linear-gradient 怎么办？无论如何，如果您确定，请修复MDN article
@Oriol 取决于您所说的越野车是什么意思。如果您定义 same 渐变，则顺序无关紧要。或者你不能使用前缀，因为all browsers support unprefixed gradients now.