包含非透明内容的透明 div - IE 6 高度：100% 不起作用答案

【问题标题】：Transparent div containing non transparent content - IE 6 height:100% not working包含非透明内容的透明 div - IE 6 高度：100% 不起作用
【发布时间】：2010-04-08 01:49:23
【问题描述】：

你好！我有一个棘手的 IE 6 问题（不是吗？）。

我想出了一个非常巧妙的方法，让一个具有透明背景的 div 显示背景的主体图像并包含非透明内容。这实际上由三个 div 组成：

一个大容器 div，一个绝对定位的透明 div 用于背景，一个相对定位的 div 包含不透明的内容。

我将两个 div 放置在包含的 div 内，这样它们就可以相互叠放，从而呈现出带有非透明内容的透明背景。

Containing div 被推送到内容 div 的大小。我将透明背景的高度和宽度设置为 100%，使其具有包含 div 的大小。这意味着我的背景随着内容的扩展而扩展，使我的所有 div 都可以扩展。

最后一点是问题所在。IE 6 不会导致背景 div 占据包含 div 的高度。如果我指定一个高度，它可以正常工作，但这意味着我失去了整个事物的可扩展性。

这是基本代码：

HTML 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
<div id="contentDiv">
<div class="tranparentDiv"></div>
<div class="nonTranparentContent">
<div class="contentBody">
<h2 id="quote">“time is given to let you apply what you have learnt in reality.”</h2>
<p>– Nandipha Nombuthuma, Concept Interactive graduate</p>
</div>
</div>
</div>
</body>
</html>

CSS 代码（另存为“style.css”）

@charset "utf-8";
/* CSS Document */
body{
background:url(bg.png);
}

.tranparentDiv{
-khtml-opacity:.6; /*several different ways to set the transparency to ensure cross browser independence*/
-moz-opacity:.6;
-ms-filter:"alpha(opacity=60)";
filter:alpha(opacity=60);
opacity:.6;
position:absolute;
top:0;
left:0;
background:#FFFFFF;
width:100%;
height:100%;
}

.nonTranparentContent{
width:inherit;
position:relative;
}

#contentDiv{
width:500px;
margin-left:auto;
margin-right:auto;
position:relative;
/*height:200px add this to work in ie 6*/
}

如果我能提供任何解决此问题的建议，我将不胜感激。我不想每次更改内容时都必须设置高度。

【问题讨论】：

标签： html internet-explorer-6 height transparent

【解决方案1】：

如果没有为包含元素指定高度，IE6 无法计算 100% 是多少。据我所知，您确实无法通过 CSS 获得您想要的内容，但您可以使用某种 javascript 来查找容器的高度，然后设置透明 div 的高度以匹配容器的高度高度。

使用 jQuery，我相信它看起来像这样：

var containerHeight = $('#contentDiv').height() + 'px';

$('.tranparentDiv').height(containerHeight);

【讨论】：

您好，感谢您的回答。我实际上最终做到了:)。我通常不喜欢使用 JavaScript 作为解决方案，因为有些人将其关闭。我以这样一种方式编写它，即仅在使用 IE 6 时才运行 Java。我想如果有人足够聪明，可以关闭 JavaScript，他们可能不会使用 IE 6。
"如果有人足够聪明，可以关闭 JavaScript，他们可能不会使用 IE 6" - 哈，这是真的 :) - 很高兴你把这件事弄清楚了。