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布局的问题，请大家帮忙

回答

相关问题