Question

在我的页面布局中，我有两个<div>标签。一个，ID为#image-panel，另一个为#image-content-panel。两个<div>使用position: absolute堆叠在一起。 #image-content-panel {更高z-index}位于#image-panel之上。两个<div>都有background: transparent。

该页面在Chrome，Safari和Firefox中呈现正常，即我可以通过文本（标题和段落等）查看图像。但是在IE（版本8）中，#image-content-panel正在以白色背景进行渲染。

您可以在下方看到截图：

Rendering in Crome, Safari, Mozilla

Rendering in IE 8

相关的CSS和HTML代码：

HTML Code

CSS Code

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

Answer 1

<强>更新 Jquery Cycle Plugin将为旧版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。

Answer 2

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

您可以使用黑客来解决此问题：我建议您在网站上试用CSS3Pie;它在旧版本的IE中实现了许多现代CSS功能，包括背景中的RGBA颜色。

希望有所帮助。

在Internet Explorer中透明背景渲染白色

2 个答案: