在IE 8中沒有顯示PNG背景圖像<使用html5？

我有以下的html代碼：在IE 8中沒有顯示PNG背景圖像<使用html5？

<section class="first-content-top"> 
    <img src="images/img-diner.png" /> 
    <h1>Menu</h1> 
</section> 
<section class="first-content-middle"> 
     <article class="menu"> 
    </article> 
</section> 
<section class="first-content-bottom"></section>

與下列類型的CSS：

.first-content-middle 
{ 
    background: url("images/bg-black.png") repeat; 
    margin: 0 0 0 37px; 
    padding: 0 20px; 
    width: 595px; 
}

但在IE8我依然看不到背景圖像，就像我在IE9或Firefox看：

下面是IE8的一個畫面：

Here's a picture of IE8

這裏是火狐的一個畫面就應該是這樣：

And here is a picture of firefox, how it should be

我試過follwing解決方案：

爲了防止我問題補充以下html5shiv code to the page of head：

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

而在螢火蟲我檢查，以確保該部分元素具有display:block;屬性集。

編輯：將height css屬性添加到該部分可修復背景問題。但截面高度是可變的。那我該如何解決這個問題？

有什麼建議嗎？

來源

2012-08-30 RTB

我們可以在任何TESTSERVER或的jsfiddle檢查這個？ – supersaiyan

注意：這裏是一個很好的測試，但是在製作時，如果IE IE 8和IE IE 9不在IE9和10上，那麼應該添加html5shiv。 – FelipeAls

@FelipeAlsacreations好的，謝謝你的提示。 – RTB

你的PNG背景圖像需要是至少4x4px。

來源

2012-08-30 13:27:11

此鏈接已損壞 - 這似乎是一個很好的解決方案：http://www.dillerdesign.com/experiment/DD_belatedPNG/ – CodeCore

我刪除了鏈接，謝謝。 –

這可能與您的問題有關。一般IE9及以下版本不喜歡透明度，不透明度。

Surplus in ie7 and ie8 intead of being Transparent while using PNG transparent and opacity

來源

2012-08-30 13:12:07 xivo

該代碼僅適用於img元素而不適用於背景圖像。這正是問題所在。對此有何建議？ – RTB

IE7和IE8有字母透明PNG原生支持，但它不透明度到圖片儘快散花。當爲不透明度設置任何值時，即使是100％（即過濾器：alpha（不透明度= 100）），IE也會用純黑色填充填充PNG的alpha透明度。這有時被稱爲「黑色光環」。 alpha濾鏡可以在任何時候刪除，以刪除填充並恢復alpha透明度，但支持這兩個需要使用更多的IE專有濾鏡。所有的後續實例應該被放置在一個IE-targete

/* Normal CSS background using an PNG with an alpha transparency */ 
#demo { 
background:url(ie8-logo.png) 0 0 no-repeat; 
}

來源

2012-08-30 13:14:01 Sathish

沒有css混濁。那已經進入導致問題的背景圖像。 – RTB

。首先，內容的中間 { 背景：URL（「圖像/ BG-black.png」）重複滾動0 0; margin：0 0 0 37px; padding：0 20px; width：595px; }

remove從背景透明

來源

2012-08-30 13:16:04 supersaiyan

對不起，它並沒有真正說透明。這是螢火蟲代碼。我會將我的anwser更改爲正確的css源代碼。 – RTB

您需要設置部分爲display：block在你的CSS

與IE瀏覽器，甚至與毒刃，需要聲明的HTML 5元素爲塊級元素。我使用此行用於Internet Explorer，但您可以通過對其進行修改以獲取所需的元素。
header,nav,article,footer,section,aside,figure,figcaption{display:block} 
從Modernizr的文檔：「你也可能需要設置許多這些元素顯示：塊;」

從IE not styling HTML5 tags (with shiv)

來源

2012-09-01 23:45:05 RobertMaysJr

仍然努力工作，對不起。以下是開發者環境的鏈接：http://dev.webrtb.com/zinn/cafe/ – RTB

在IE 8中沒有顯示PNG背景圖像<使用html5？

回答

相關問題