IE浏览器中的HTML5，CSS背景图像显示问题

我已经搜索了很多堆栈溢出，并且所有与此相关的解决方案都没有解决我的问题。IE浏览器中的HTML5，CSS背景图像显示问题

所以我一直在试图在数字元素上加载背景图像。这适用于firefox，chrome，opera和safari ......但当然IE9/8/7正在搞乱我的脑袋。

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

与我一直在使用一个div，而不是一个数字尝试风格的

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

，将其设置为显示块，摆脱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>

我也试过其他的doctype只是为了确保它不是，要么。当我在它之前设置背景色时，它会显示颜色。无论如何，我有一种感觉，这将是一个相当明显的和/或简单的事情......事先感谢并且抱歉，如果它已经被发现了。

来源

2011-08-30 J Cole Morrison

您是否强制IE通过先用document.createElement（“figure”）创建一个来识别figure元素？ – scrappedcola

感谢您的回复scrappedcola！但是，即使当我用div切换图时，它也不会显示 –

愚蠢的问题，但是当您将图转换为div时，是否更改了css以指定div？ – scrappedcola

您可以使用HTML5 Shiv以使IE9识别新元素。

只需将其添加到您的HEAD即可。

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

来源

2011-08-30 21:08:55

感谢您的回复Yeco。我试图把它添加到头部，它仍然没有做任何事情：\ –

您是否有显示：block for the figure？ –

我写这样的，它的工作对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>

来源

2011-08-30 21:12:28

嘿，感谢您的回复。我开始怀疑它是否是我的电脑...... –

你的“Windows更新”是否有效？有时候微软会发布关于IE9修补程序的新更新。 –

Internet Explorer无法风格人物元素（它不支持大多数版本）。我不确定IE的最新版本，但它可能在那里工作。

来源

2011-08-30 21:15:00 scottheckel

嘿Hexxagonal。感谢您的帮助。我用一个div元素切换了这个图（重新定向了css和全部），而IE9上我仍然没有得到任何东西 –

我已经得到它的工作，但它似乎唯一的方式IE浏览器将识别该图是先使用document.createElement（“图”）创建元素，并删除该ID。它的风格与CSS只是针对这个数字，但它吓坏了，如果有一个身份证目前。我在这里做的一个例子是：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不会将其视为内联元素。

来源

2011-08-30 21:30:15 scrappedcola

IE浏览器中的HTML5，CSS背景图像显示问题

回答

相关问题