Question

嘿那里！我有一个棘手的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.”</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*/
}

我很感激有什么建议可以解决这个问题。每次改变我的内容时，我都不得不去设定一个高度。

Answer 1

如果没有为包含元素指定高度，IE6无法计算100％。据我所知，你真的没有什么可以用CSS获得你想要的东西，但你可以使用某种javascript来找到容器的高度，然后设置透明div的高度以匹配容器的高度。

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

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

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

包含非透明内容的透明div - IE 6高度：100％无效

1 个答案: