包含非透明内容的透明 div - IE 6 height:100% 不起作用
嘿！我有一个棘手的 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*/
}
有任何关于如何解决此问题的建议，我将不胜感激。我不想每次更改内容时都必须去设置高度。
Hey there! I have a bit of a sticky IE 6 problem (don't we all?).
I figured out what I think is a pretty neat way to have a div with a transparent background that shows the background's body image and containing non-transparent content. This consists of three divs really:
One big container div, one absolutely positioned transparent div for the background and one relatively positioned div with the non-transparent content.
I position the two divs inside the containing div so they sit on top of each other giving the appearance of a transparent background with non-transparent content.
The Containing div is pushed to the size of the content div. I set the transparent background's height and width to 100% causing it to take on the containing div's size. This then means that my background expands with the content making all my div's extensable.
This last bit is where the problem comes in. IE 6 does not cause the background div to take on the height of the containing div. If I specify a height it works fine, but this means that I loose the extendability of the whole thing.
Here is the basic code:
HTML code
<!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 code (save as “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*/
}
I'd appreciate any suggestions how I could work around this. I would hate to have to go and set a height every time I change my content.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果没有为包含元素指定高度，IE6 无法计算 100%。据我所知，您确实无法通过 CSS 获得您想要的结果，但您可以使用某种 javascript 来查找容器的高度，然后设置透明 div 的高度以匹配容器的高度高度。
使用 jQuery，我相信它会看起来像这样：
IE6 can't calculate what 100% is without a height specified to the containing element. To my knowledge there really isn't anything you can do to get exactly what you want here with CSS, but you could use some sort of javascript to find the height of the container and then set the height of the transparent div to match the container's height.
Using jQuery, I believe it would look something like this: