为什么background-image属性会在Chrome中引发警告?

Isa*_*bow 9 css google-chrome background-image google-chrome-devtools

我正在使用jQuery的.css()方法来设置a的背景图像div.因此,处于最终状态的HTML是:

<div id="front-page-bg" style="background-image: url(http://peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg); display: block; "></div>

它工作正常,但是,我在Chrome中收到错误/警告,其中background-image属性被击中,好像它因输入错误而被忽略,即使它显然被应用了.为什么会这样?这是Chrome的问题,还是我的问题?

Chrome开发者工具窗口中的错误

我已经在FF和IE中测试了这个页面,它似乎也没有任何错误或类似的警告.关于为什么会发生这种情况的想法,也许更重要的是,我应该忽略它,因为该页面似乎正在发挥作用?

ʞᴉɯ*_*ʞᴉɯ 7


编辑:

通过更深入地检查(忽略第一个误导性的404图像问题),似乎开发人员工具忽略了样式定义; 事实上它应用了一个 not-parsed-ok附加警告图标的overloaded类,以及一个导致直通的类.如果使用background代替background-imagecss定义,则不会附加重载的类.

但要发现这种行为的原因,有必要分析开发人员工具源代码.

我猜这是一个开发人员工具bug /不完整的功能.

这是我自己的测试:

在此输入图像描述

你可以看到使用的图像是本地的,并有apix.这是由此产生的检查:

在此输入图像描述

使用不存在的css属性进行测试时,它显示相同的行为:

在此输入图像描述


您引用的图像有一些奇怪的Web服务器问题:实际上它返回404错误(可能是超时?),然后是重定向.

因此,您应该检查图像和Web服务器路径,而不是实际的html代码.

Chrome截图

即使尝试输入实际的html代码,错误也是一样的:

在此输入图像描述

这是您的Web服务器的实际响应,而不是您的图像:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{overflow:hidden;background:#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png) center center no-repeat}
</style>
</head>
<body>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)


loi*_*slo 2

问题是 DevTools/WebInspector 错误。DevTools UI 代码仅显示 DevTools 后端部分并不总是正确生成的数据。

WebKit 错误:https://bugs.webkit.org/show_bug.cgi? id=70325

铬错误:http://code.google.com/p/chromium/issues/detail? id=100646