2

小提琴

我在一个个人网站上工作，并且正在使用线性渐变来设置导航栏的样式。但是，在 Firefox 中工作时，样式在 Chrome 中被打破。在 Chrome 中，主导航栏颜色为白色，并且文本在悬停时消失。

nav ul {
  background: -moz-linear-gradient(center top , #EFEFEF 0%, #BBBBBB 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  background: -webkit-linear-gradient(center top , #EFEFEF 0%, #BBBBBB 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  background: -o-linear-gradient(center top , #EFEFEF 0%, #BBBBBB 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);

  .. other style settings

}

为了使这个 CSS Chrome 兼容，我必须进行哪些更改？

4

1 回答 1

2

那是因为 Chrome 不处理style的center属性。-webkit-linear-gradient实际上，如果您通过按F12然后转到控制台并打开 CSS 登录来打开 Chrome 的开发人员工具，您将收到以下消息：

无效的 CSS 属性值：-webkit-linear-gradient(center top , #4F5964 0%, #5F6975 40%) repeat scroll 0 0 rgba(0, 0, 0, 0)

然而，Chrome 确实只是简单地接受linear-gradientCSS 属性（并且已经这样做了一段时间）。无论如何，当最终删除这些前缀时，您应该使用它。而不是使用center top，您可以简单地使用to bottom：

background: linear-gradient(to bottom, #EFEFEF 0%, #BBBBBB 100%)
                                              repeat scroll 0 0 rgba(0, 0, 0, 0);

JSFiddle 演示。

另外，您也可以将所有center top声明替换为to bottom：

background: -moz-linear-gradient(to bottom, #EFEFEF 0%, #BBBBBB 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(to bottom, #EFEFEF 0%, #BBBBBB 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -o-linear-gradient(to bottom, #EFEFEF 0%, #BBBBBB 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: linear-gradient(to top , #EFEFEF 0%, #BBBBBB 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
于 2013-10-12T20:33:28.460 回答