【问题标题】: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.
      猜你喜欢
      • 2019-03-09
      • 1970-01-01
      • 1970-01-01
      • 2015-01-31
      • 2019-06-19
      • 1970-01-01
      • 2011-08-08
      • 2017-06-20
      • 1970-01-01
      相关资源
      最近更新 更多