2

我有以下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的图片：

这是IE8的图片

这是Firefox的图片，应该是这样的：

这是Firefox的图片，应该如何

我尝试了以下解决方案：

为了防止这个问题，我在页面头部添加了以下 html5shiv 代码：

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

在萤火虫中，我检查以确保 section 元素具有display:block;属性集。

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

有什么建议么？

4

5 回答 5

8

您的 png 背景图像必须至少为 4x4 像素。

于 2012-08-30T13:27:11.433 回答
1

.first-content-middle { background: url("images/bg-black.png") 重复滚动 0 0; 边距：0 0 0 37px；填充：0 20px；宽度：595px；}

从背景中删除透明

于 2012-08-30T13:16:04.603 回答
0

IE7 和 IE8 对 alpha-transparency 具有原生 PNG 支持，但一旦出现不透明度，它就会崩溃。当为不透明度设置任何值时，即使是 100%（即过滤器：alpha(opacity = 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-30T13:14:01.940 回答
0

这可能与您的问题有关。一般IE9及以下不喜欢透明，不透明。

在使用 PNG 透明和不透明时，ie7 和 ie8 中的盈余而不是透明

于 2012-08-30T13:12:07.567 回答
0

您需要在 CSS 中设置部分为 display:block

使用 IE，即使使用 shiv，您也需要将 HTML 5 元素声明为块元素。我将此行用于 Internet Explorer，但您可以根据需要修改它。

header,nav,article,footer,section,aside,figure,figcaption{display:block}

来自 Modernizr 文档：“您可能还希望将其中许多元素设置为 display:block;”

来自IE 没有样式化 HTML5 标签（使用 shiv）

于 2012-09-01T23:45:05.183 回答