为什么内联"背景图片"样式在Chrome 10和Internet Explorer 8中不起作用？

Question

为什么以下示例在Firefox 4中显示图像,但在Chrome 10和Internet Explorer 8中不显示？

HTML:

<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div>

CSS:

div {
    width: 60px;
    height: 60px;
    border: 1px solid black;
}

任何解决方法的想法？

Answer 1

正如c-smile所提到的:只需删除以下内容中的撇号url():

<div style="background-image: url(http://i54.tinypic.com/4zuxif.jpg)"></div>

在这里演示

Answer 2

Chrome 11在其调试器中吐出以下内容：

[错误] GET http://www.mypicx.com/images/logo.jpg未定义（未定义）

托管服务似乎使用了一些时髦的动态系统，阻止了这些浏览器正确获取它。（相反，它尝试获取默认的基础图像，而该图像有问题是jpeg。）您可以将图像的另一个副本上传到其他地方吗？我希望从长远来看，它是最简单的解决方案。

编辑：查看当您使用普通<img>标签放置图像时，Chrome中会发生什么;）

Answer 3

它在我的 google chrome 浏览器版本 11.0.696.60 中工作

我创建了一个简单的页面，没有其他项目，只有基本标签，没有单独的 CSS 文件，并得到了一个图像

这就是我的设置：

<div id="placeholder" style="width: 60px; height: 60px; border: 1px solid black; background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div>

我放了一个 id，以防万一有隐藏的 id 标签，它可以工作

Answer 4

您还必须指定宽度和高度

 <section class="bg-solid-light slideContainer strut-slide-0" style="background-image: url(https://accounts.icharts.net/stage/icharts-images/chartbook-images/Chart1457601371484.png); background-repeat: no-repeat;width: 100%;height: 100%;" >