HTML佈局的問題，請大家幫忙

你好，我有一個HTML文檔如下HTML佈局的問題，請大家幫忙

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="style/styles.css" type="text/css" /> 
<title>::Model::</title> 
</head> 
<body> 
<div id="wrapper"> 

<div id="header"> 
header 
</div> 

<div id="main"> 


<div id="left"> 


text<br> 
text<br> 
text<br> 
text<br> 
text<br> 
text<br> 
text<br> 
text<br> 
text<br> 
text<br> 
text<br> 
text<br> 
text<br> 

</div> 
<div id="right"> 

text<br> 
text<br> 

</div> 

</div> 

<div id="footer"> 
footer 
</div> 

</div> 
</body> 
</html>

我的CSS文件是

#wrapper{ 
    margin:0px auto; 
    width:1000px; 
} 

#header{ 
height:50px; 
border:#CCCCCC solid 1px; 
margin:2px; 
padding:5px; 
} 

#main{ 
border:#990000 solid 1px; 
margin:2px; 
padding:5px; 
overflow:auto; 
} 

#footer{ 
height:100px; 
border:#CCCCCC solid 1px; 
margin:2px; 
padding:5px; 
} 

#left{ 
border:#CCCCCC solid 1px; 
width:640px; 
padding:4px; 
float:left; 

margin-right:2px; 

} 
#right{ 
float:right; 
padding:4px; 

border:#CCCCCC solid 1px; 
width:320px; 


}

這在所有的瀏覽做工不錯，除了IE6，主要區域應該與動態內容一起擴展。

感謝您的幫助

來源

2010-10-26 Thomas John

你爲什麼用'css3'標記這個？我在樣式表中看不到任何CSS3 ...並且如果有一些我錯過了，那就是你的問題：IE6不支持CSS3。它幾乎不支持CSS2。有人可能會爭論CSS1支持的質量，但這是另一回事。你也可以告訴我們它在IE6中究竟做了些什麼。 – 2010-10-26 03:38:14

嘗試添加一個height: 100%到#main - 這是一個已知的黑客使IE正確渲染overflow: auto。

來源

2010-10-26 03:40:47 casablanca

你應該嘗試validating你的網頁。你已經給它一個xhtml文檔類型，但你絕對不會寫出有效的xhtml。像這樣的無效代碼經常會導致不同瀏覽器出現故障，但在IE6的情況下，它可能無法正常工作。

來源

2010-10-26 03:37:24

如果我記得正確的話，如果你想使用溢出方法清除它，IE需要在div#main上有一個寬度。

來源

2010-10-26 03:40:00 prodigitalson

左右浮動不會導致包裝向下延伸。

地方< DIV風格= 「明確：既」 > </DIV >

的DIV ID =結束標記後「右」這將拉動包裝和主要的div下來。

來源

2010-10-26 03:44:22 Wayne

這是我使用的黑客。請記住，這是一個徹頭徹尾的黑客，不應該取代聲音的CSS。將其粘貼到頁面的底部。

<script type="text/javascript" language="javascript"> 

function setMainHeight(){ 
    var main = document.getElementById("main"); 
    var left = document.getElementById("left"); 
    var right = document.getElementById("right"); 

    main.style.height = (left.offsetHeight >= right.offsetHeight) ? left.offsetHeight + 'px' : right.offsetHeight + 'px'; 

} 
setMainHeight(); 

</script>

來源

2010-10-26 03:50:16

HTML佈局的問題，請大家幫忙

回答

相關問題