CSS background-image in IMG elements not displaying in IE
I have an IMG tag with an background-image property. Whilst both images display in FF, only the IMG src image displays in IE. At this stage I am not concerned with positioning or anything, I just want both IMG src and background-image displayed on the page.
Here is my basic test 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-开发者_C百科no.gif"/> </div>
</body>
</html>
Any help greatly appreciated. Thank you
I wouldn't suggest giving the <img> css class background and a src; rather place it in a <div> instead and manipulate that as you need. You should get a result like this: jsFiddle
I think maybe your Doctype is a problem
Working Example
in this test it works fine in IE with:
<!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>
加载中,请稍侯......
精彩评论