在IE 8中未显示的PNG背景图像<用html5？ [英] PNG background image not showing in IE 8< using html5?

问题描述

我有以下HTML代码：

I have the following html code:

<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：

With the following type of css:

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

但在IE8中，我仍然看不到背景图像，就像我看到的那样在IE9或Firefox中：

But in IE8 i still can't see a background image, like i see in IE9 or firefox:

这是IE8的图片：

这里是firefox的图片，它应该如何：

我尝试了以下解决方案：

I tried the follwing solutions:

为了防止出现此问题，我将以下html5shiv代码添加到页面的头部：

To prevent the problem i added the following html5shiv code to the head of the page:

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

在firebug中我检查以确保section元素具有显示：block; 属性设置。

And in firebug i checked to make sure that the section element has the display:block; property set.

编辑：将 height css属性添加到部分修复了背景问题。但截面高度是可变的。那我该怎么办？

Adding the height css property to the section fixes the background problem. But the section height is variable. So how do i fix that?

有什么建议吗？

推荐答案

你的png背景图片需要至少4x4px。

Your png background image needs to be at least 4x4px.

这篇关于在IE 8中未显示的PNG背景图像<用html5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！