Question

Chrome已经开始警告我遗留的渐变：

Invalid CSS property value: right no-repeat url('../Images/Logo_white.png'), 
-moz-linear-gradient(bottom, #899fa6, #3e545c)

仅适用于o，moz和ms的扩展名：

background: right no-repeat url('../Images/CompanyLogo.png'), 
-moz-linear-gradient(bottom, #000000, #ffffff);

webkit的那个很好：

background: right no-repeat url('../Images/CompanyLogo.png'), 
-webkit-linear-gradient(bottom, #000000, #ffffff);

我做错了吗？

扩展渐变在单独使用时不会生成警告，而不是与图像组合。

Answer 1

您从Chrome的开发工具收到警告的原因是因为Chrome的值确实无效。但是，这不应该让你感到惊恐，因为这是它的设计方式。

在CSS中，如果某些内容定义不正确或浏览器无法识别，那么它只是被传递，没有任何操作，它只会发出警告而不是错误。此行为正是允许供应商前缀工作的原因。以你自己的情况为例：

background: right no-repeat url('../Images/CompanyLogo.png'), 
-moz-linear-gradient(bottom, #000000, #ffffff);

background: right no-repeat url('../Images/CompanyLogo.png'), 
-webkit-linear-gradient(bottom, #000000, #ffffff);

background: right no-repeat url('../Images/CompanyLogo.png'), 
linear-gradient(bottom, #000000, #ffffff);

Chrome会浏览每个background属性并查看它可以解释的属性。它无法解释第一个渐变，因为它不像Firefox那样识别-moz-。可以解释第二个，因为它有一个-webkit-前缀。它还可以解释第三个背景，因为Chrome支持无前缀的CSS渐变。

由于多个CSS属性会影响相同的内容（background），因此将使用列出的最新属性（未加前缀的版本）。将显示未解释的第一个background的警告，但它不会对项目产生任何影响。

是的，应该查看和分析警告，通常将其视为错误。话虽如此，你提出的关于浏览器前缀的案例是正确的做法，所以应该接受警告。在一个完美的世界中，他们根本不会出现，他们会明白它是为另一个浏览器而设，但没有理由担心它，因为它确实是这样做的正确方法

但话又说回来，这完全是半无关紧要的，因为all major browsers support CSS gradients unprefixed。

Answer 2

我在Chrome开发者工具上发现了这个错误：

http://code.google.com/p/chromium/issues/detail?id=309982

似乎他们会暂时禁用CSS警告，因为有太多误报（包括旧版浏览器的有效CSS，如果我们要通过票证作者），直到他们修复它为止。

这些警告可能是这些误报的一部分。我会监控这个问题。

带有图像和扩展渐变的背景的CSS属性值无效

2 个答案: