透明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％不能正常工作

回答

相關問題