2

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

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

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

我将两个 div 放置在包含的 div 内，使它们彼此叠放，从而呈现出带有非透明内容的透明背景。

包含 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.”&lt;/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*/
}

我很感激任何关于如何解决这个问题的建议。每次更改内容时，我都不愿意去设置一个高度。

4

1 回答 1

1

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

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

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

$('.tranparentDiv').height(containerHeight);
于 2010-04-01T14:02:23.983 回答