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背景圖像顯示問題

回答

相關問題