透明div包含非透明内容 - IE 6高度：100％不能正常工作

嘿！我有一个粘性的IE 6问题（我们都不是？）。透明div包含非透明内容 - IE 6高度：100％不能正常工作

我想通过一个非常简洁的方式来创建一个带透明背景的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*/ 
}

我会很感激的任何建议，我怎么可能解决这个问题。每当我改变我的内容时，我都不愿意去设置高度。

来源

2010-04-01 phunder

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

使用jQuery，我相信它会是这个样子：

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

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

来源

2010-04-01 14:02:23

嘿感谢答案。我实际上最终做了那个:)。我一般不喜欢使用JavaScript作为解决方案，因为有些人关闭它。我是这样写的，只有在使用IE 6时才运行Java。我认为，如果有人足够聪明，可以关闭JavaScript，他们可能不会使用IE 6. – phunder 2010-04-06 11:08:03

“如果有人足够聪明，可以关闭JavaScript，他们可能不会使用IE 6” - 哈，这是非常真实的:) - 格拉德你理清了这一点。 – 2010-04-06 19:05:33

透明div包含非透明内容 - IE 6高度：100％不能正常工作

回答

相关问题