Question

我已经仔细研究了堆栈溢出，所有与此相关的解决方案都没有解决我的问题。

所以我一直在尝试将背景图像加载到图元素上。这适用于firefox，chrome，opera和safari ...但当然IE9 / 8/7让我头疼。

<figure id="mainlogo">
</figure>

的风格为

figure#mainlogo {
  background: url(../images/logocrop.png) no-repeat center;
}

我尝试过使用div代替图形，将其设置为显示块，删除id，以及几乎我能在网上找到的所有东西。另外，我尝试将它分成背景色，背景图像等分离的CSS样式。

我没有发布剩下的代码，因为即使我把它分成一个单独的html文件，它仍然没有显示，但是它不起作用

<!DOCTYPE html>
<html>
<head>
</head>
<body>    
  <figure style="background: url(../images/logocrop.png) no-repeat center; height:40em; width:55em;"></figure>
</body>
</html>

我也试过其他的doctypes，以确保它不是那个。当我在它前面设置背景颜色时，它会显示颜色。无论如何，我有一种感觉，这将成为一个相当明显和/或容易的事情......如果它已被弄清楚，请提前感谢并且抱歉纠缠不清。

Answer 1

您可以使用HTML5 Shiv使IE＆lt; 9识别新元素。

只需将其添加到您的HEAD。

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

Answer 2

我是这样编写的，它在IE 9上运行没有任何问题（我为我更改了图像名称）：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
figure#mainlogo {background: url(../images/header.png) no-repeat center; height:200px; width:1000px;}
</style>
</head>
<body>    
<figure id="mainlogo"></figure>
</body>
</html>

Answer 3

Internet Explorer无法设置图形元素的样式（大多数版本都不支持）。我不确定IE的最新版本，它可能在那里工作。

Answer 4

我已经开始工作，但似乎IE将识别该图的唯一方法是首先使用document.createElement（“figure”）创建元素，并且还删除id。它会以css的形式定位，只是针对这个数字，但如果存在id，它就会变得怪异。我所做的一个例子是：http：//jsfiddle.net/pdq7u/5/，文档在这里：http：//ejohn.org/blog/html5-shiv/。

<script>document.createElement("figure");</script>
<style>

figure{
       background:pink url(http://ejohn.org/files/jeresig-wordpress-sm.jpg) no-repeat center; 
    height:200px; 
    width:1000px;
    border:1px solid red;
    display:block;
    }
</style>
<figure>&nbsp;</figure>

请注意，您还需要显示块，因此IE不会将其视为内联元素。

IE5中的HTML5，CSS背景图像显示问题

4 个答案: