Question

我有以下HTML代码：

<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

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

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

我尝试了以下解决方案：

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

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

我在firebug中检查过以确保section元素设置了display:block;属性。

编辑：将height css属性添加到该部分可修复背景问题。但截面高度是可变的。那么我该如何解决这个问题？

有什么建议吗？

Answer 1

您的png背景图片必须至少为4x4px。

Answer 2

。首先化内容中 { background：url（“images / bg-black.png”）重复滚动0 0; 保证金：0 0 0 37px; 填充：0 20px; 宽度：595px; }

从背景中删除透明

Answer 3

这可能与您的问题有关。通常IE9及以下版本不喜欢透明度，不透明度。

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

Answer 4

IE7和IE8具有原生PNG支持alpha透明度，但只要不透明度进入画面就会崩溃。当为不透明度设置任何值时，即使是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;
}

Answer 5

你需要在CSS中设置显示：阻止的部分

使用IE浏览器，即使使用shiv，也需要声明HTML 5元素作为块元素。我将此行用于Internet Explorer，但您可以为你需要的元素修改它。
header,nav,article,footer,section,aside,figure,figcaption{display:block}
来自Modernizr文档：“你也可能想要设置要显示的许多元素：block;“

来自IE not styling HTML5 tags (with shiv)

在IE 8中未显示的PNG背景图像＆lt;用html5？

5 个答案: