IE8 中“背景大小”CSS 属性的解决方法，尝试将两个 div 分层答案

【问题标题】：workaround for "background-size" CSS property in IE8, trying to layer two divsIE8 中“背景大小”CSS 属性的解决方法，尝试将两个 div 分层
【发布时间】：2013-02-12 10:18:15
【问题描述】：

阅读论坛，了解如何让背景图像覆盖 div，无论大小，并发现“background-size”CSS 属性。它是一个瑰宝，在 Firefox 中运行良好，但不幸的是，我在一家以 IE8 为标准的大公司工作。浏览器无法识别“背景大小”，我将不得不作弊以获得所需的效果。

我正在尝试对两个 div 进行分层——一个具有适合 img 标签中 div 的图像大小，另一个包含要叠加的文本。独立地，两个 div 都运行良好，但它们根本没有分层。他们一个接一个地出现。

我已经用 z-index 值、绝对和相对定位组合、浮点数等进行了测试，但没有运气。感觉我一定是遗漏了一些明显的东西，如果再有一双眼睛，我将不胜感激。

最新的CSS如下：

.case-background {
margin-left: 93px;
margin-right: 93px;
border: 1px solid #665546;
}
.case-background img {
height: 100%;
width: 100%;
position: relative;
z-index: 0;
}
.case-text {
margin: 12px;
padding-left: 35px;
padding-right: 35px;
border: 1px solid #665546;
font-family: Arial, Helvetica, sans-serif;
color: #665546;
border: 1px solid #665546;
font-weight: normal;
background-color: #FFFFFF;
position: relative;
z-index: 1;
}

HTML如下，减去header info和html、head、body标签等：

<div class="case-background">
<img src="images/test.jpg" />
<div class="case-text">
<h2>testing header</h2>
<p>testing paragraph</p>
</div>
</div>

【问题讨论】：

标签： image html internet-explorer-8 css

【解决方案1】：

CSS3Pie 是一个库，它为旧版本的 IE 添加了许多 CSS3 功能。如果您卡在 IE8 上但需要支持一些现代 CSS 功能，那就太好了。

最新版本的 CSS3Pie 包括对 background-size 样式的支持。因此，使用 CSS3Pie，您可以只使用标准 CSS 来获得背景大小效果。

您可以使用许多其他 javascript hack 也可以做同样的事情，但 CSS3Pie 是一个很棒的小工具；我每次都会推荐它。

【讨论】：