Question

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

这是我的基本测试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>

任何帮助非常感谢。谢谢

Answer 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>

Answer 2

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

IMG元素中的CSS背景图像不在IE中显示

2 个答案:

Working Example