Internet Explorer不显示由CSS加载的图像
[英]Internet Explorer not displaying image loaded by CSS
问题描述
This is my HTML (the CSS is part of the HTML): 
这是我的HTML（CSS是HTML的一部分）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div id='header'>
<table id='headerBar'>
<tr>
<td><a href ='#' id='homeIcon'></a></td>
<td><a href ='#' id='myProfileIcon'></a></td>
<td><a href ='#' id='settingsIcon'></a></td>
</tr>
</table>
</div>
</body>
</html>
<style>
#homeIcon {
content:url('shipping3.png');
}
#settingsIcon {
content:url('shipping3.png');
}
#myProfileIcon {
content:url('shipping3.png');
}
</style>
When I open this file up in Google Chrome, it works perfectly fine and displays the 3 images. 当我在谷歌浏览器中打开此文件时，它可以正常工作并显示3张图像。 When I open it up in Internet Explorer, none of the 3 images are shown (It is just a blank page). 当我在Internet Explorer中打开它时，没有显示3个图像（它只是一个空白页面）。 Any idea why? 知道为什么吗？ (I tried viewing it from Internet Explorer 10, 9, 8, and 7. None display any of the 3 images). （我尝试从Internet Explorer 10,9,8和7中查看它。无显示3个图像中的任何一个）。
3 个解决方案
解决方案1
2 2014-07-06 21:24:45
I have removed most of the code and left an example. 我删除了大部分代码并留下了一个例子。
<td width="100" height="100" id='homeIcon'><a href ='#'></a></td>
<td><a href ='#' id='myProfileIcon'></a></td>
<td><a href ='#' id='settingsIcon'></a></td>
<style>
#homeIcon {
background:url("shipping3.png");
}
...
</style>
The tag my itself does not have a size, especially when empty. 标签我自己没有大小，特别是空的时候。 It is a no width/height container of nothing. 它没有任何宽度/高度的容器。
For backwards compatibility reasons the correct syntax for linking an image as a background is background:url("shipping3.png") 出于向后兼容性原因，将图像链接为背景的正确语法为background：url（“shipping3.png”）
I have added the width and height of the in line in order to observe easier where we specify them. 我已经添加了内联的宽度和高度，以便更容易地观察它们的位置。
解决方案2
2 已采纳 2014-07-06 21:39:58
Because the content property is used with the ::before and ::after pseudo-elements to generate content in a document. 因为content属性与:: before和:: after伪元素一起使用以在文档中生成内容。
http://www.w3.org/wiki/CSS/Properties/content http://www.w3.org/wiki/CSS/Properties/content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#homeIcon::after {
content:url('http://www.placehold.it/200x200');
}
#settingsIcon::after {
content:url('http://www.placehold.it/200x200');
}
#myProfileIcon::after {
content:url('http://www.placehold.it/200x200');
}
</style>
</head>
<body>
<div id='header'>
<table id='headerBar'>
<tr>
<td><a href ='#' id='homeIcon'></a></td>
<td><a href ='#' id='myProfileIcon'></a></td>
<td><a href ='#' id='settingsIcon'></a></td>
</tr>
</table>
</div>
</body>
</html>
解决方案3
1 2014-07-06 21:31:07
You can simply use background:url() to add image. 您只需使用background：url（）添加图像即可。 As the a tag was empty so in IE it wasn't displaying the image. 因为a标签是空的所以在IE中它没有显示图像。 Here you go 干得好
<!DOCTYPE html>
<html>
<head>
<style>
#homeIcon {
background:url('shipping3.png');
height:300px;
width:100px;
}
#settingsIcon {
background:url('shipping3.png');
}
#myProfileIcon {
background:url('shipping3.png');
}
</style>
</head>
<body>
<div id="header">
<table id='headerBar'>
<tr>
<td><a href ="#" id="homeIcon">Lorem Ipsum</a></td>
<td><a href ="#" id="myProfileIcon"></a></td>
<td><a href ="#" id="settingsIcon"></a></td>
</tr>
</table>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.