0

在我的页面布局中，我有两个<div>标签。一个，带有 id #image-panel，另一个带有#image-content-panel. 两个<div>s 使用 相互堆叠position: absolute。#image-content-panel（具有更高的z-index）位于 之上#image-panel。两者<div>都有background: transparent。

该页面在 Chrome、Safari 和 Firefox 中呈现良好，即我可以通过文本（标题和段落等）看到图像。但在 IE（第 8 版）#image-content-panel中，正在重新渲染为白色背景。

你可以看到下面的截图：

在 Crome、Safari、Mozilla 中渲染

在 IE 8 中渲染

相关的 CSS 和 HTML 代码：

HTML 代码

CSS 代码

我也希望页面在 IE 中呈现相同的内容。任何帮助表示赞赏。如果无法解决，请也提出替代解决方案。

4

2 回答 2

2

更新Jquery Cycle 插件将为旧版本的 IE 中的元素添加背景颜色 。

您需要在循环初始化中将cleartypeNoBg选项设置为。true

$("#image-content-panel").cycle({
    fx : 'scrollRight',
    speed : 2700,
    cleartypeNoBg: true 
});

编辑以下内容无关紧要

IE8 不支持 rgba 值，将退回到纯色。如果您没有定义后备，它将默认为您所看到的白色。

有几种方法可以处理这个问题。

1.接受IE8的限制。

    #header {
        z-index: 100 !important;
        width: 100%;
        height: 50px;
        background: rgb(0,0,0);
        background: rgba(0,0,0,0.6);
        margin: 10px 0 0 0;
    }

#header在不支持 rgba 的浏览器中会有纯黑色背景。在浏览器中是半不透明的。

2.使用过滤器

    #header {
        z-index: 100 !important;
        width: 100%;
        height: 50px;
        background: rgba(0,0,0,0.6);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
        margin: 10px 0 0 0;
    }

#header在 IE8 和适当的浏览器中将有 60% 的透明黑色背景。就个人而言，我讨厌使用过滤器。它们使您的标记变得丑陋并且难以维护，除非您非常擅长将 rgb 转换为您的头脑中的十六进制代码（我不是）。此外，这个特殊的过滤器是 IE8+。它在 IE7 中不起作用，但在 IE6-7 中也有其他过滤器。您还应该将其分离到特定于 IE8 的样式表中，或者使用其他方法来防止 IE9 使用过滤器，因为 IE9 支持 rgba。

3.使用 1px x 1px 黑色、半透明的 .png

    #header {
        z-index: 100 !important;
        width: 100%;
        height: 50px;
        background: url(background.png) repeat;
        margin: 10px 0 0 0;
    }

这是我通常走的路线，因为它很简单。如果您需要更改 alpha 并且无需担心浏览器不一致，则创建 .png 需要几秒钟的时间。

于 2012-09-05T08:00:49.433 回答
1

正如其他人所说，IE8 不支持 RGBA 颜色值。

不过，你可以使用一个 hack 来解决这个问题：我建议在你的网站上试用CSS3Pie；它在旧版本的 IE 中实现了许多现代 CSS 功能，包括背景中的 RGBA 颜色。

希望有帮助。

于 2012-09-05T08:04:57.523 回答