0

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);

难道我做错了什么？

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

4

2 回答 2

2

您从 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属性并查看它可以解释哪个属性。它无法解释第一个渐变，因为它不能-moz-像 Firefox 那样识别。它可以解释第二个，因为它有一个-webkit-前缀。它还可以解释第三个背景，因为 Chrome 支持无前缀 CSS 渐变。

由于多个 CSS 属性会影响同一事物 ( background)，因此将使用列出的最新属性（无前缀版本）。未解释的 first 将显示警告background，但对项目没有影响。

是的，警告应该被查看和分析，通常被视为错误。话虽如此，您提出的有关浏览器前缀的情况是正确的做法，因此应该接受警告。在一个完美的世界里，他们根本不会出现，他们会理解它是为另一个浏览器设计的，但没有理由担心它，因为它确实是正确的做法

但是话又说回来，这都是半无关紧要的，因为所有主流浏览器都支持 CSS 渐变 unprefixed。

于 2013-10-30T17:42:05.083 回答
0

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

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

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

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

于 2013-11-06T09:55:49.487 回答