IMG 元素中的 CSS 背景图像未在 IE 中显示答案

【问题标题】：CSS background-image in IMG elements not displaying in IEIMG 元素中的 CSS 背景图像未在 IE 中显示
【发布时间】：2011-09-09 09:05:40
【问题描述】：

我有一个带有背景图像属性的 IMG 标记。虽然两个图像都显示在 FF 中，但只有 IMG src 图像显示在 IE 中。在这个阶段我不关心定位什么的，我只想在页面上同时显示 IMG src 和 background-image。

这是我的基本测试 HTML：

<html>
<head>
    <title>carmen's test page </title>
    <style>
        .icon {
            display: block;
            background-image: url('drop-yes.gif');
            background-repeat: no-repeat;
            padding: 200px 200px 200px 200px;
            margin: 20px 20px 20px 20px;
        } 
    </style>
</head>
<body>    

<div> <img class="icon" src="drop-no.gif"/> </div>

</body>
</html>

非常感谢任何帮助。谢谢

【问题讨论】：

哪个版本的 IE？ IE5/Mac 不支持用单引号分隔的 CSS url。

标签： css internet-explorer background-image image

【解决方案1】：

我认为您的 Doctype 可能有问题

Working Example

在这个测试中，它在 IE 中运行良好：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
.icon {
   display: block;
   background: url(http://dummyimage.com/450x450/dad/fff&text=yes) no-repeat;
   padding: 200px 200px 200px 200px;
   margin: 20px 20px 20px 20px;
} 
</style>
</head>
<body>
<div> <img class="icon" src="http://dummyimage.com/50x50/444/fff&text=no"/> </div>
</body>
</html>

【讨论】：

对于被取代的规范来说，这是一个令人不安的特定文档类型。请改用<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。
这也是我的古代编辑器默认的那个。。谢谢你的提醒（回答也很生气）！虽然我认为我的意思是说任何 Strict 渲染 Doctype 都可以；）匆匆忙忙更新我的编辑器 :)
太棒了！它的文档类型（或者更准确地说，它不是）谢谢。
确保您接受@clairesuzy 的回答，@Carmen。谢谢@clairesuzy，你解决了一个一直困扰我的问题。
@Rob Heiser 不客气，很高兴为您提供帮助！

【解决方案2】：

我不建议给<img> css 类背景和一个src；而是将其放在<div> 中，并根据需要进行操作。你应该得到这样的结果：jsFiddle

【讨论】：