请问，css布局总宽度没超过父框架，为什么会 错位？
本帖最后由 corn8888 于 2013-05-10 21:35:51 编辑
<!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" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:0;
padding:0;
border: 0;
}
.layoutDemo {
width: 960px;
background: #000;
}
#left {
width: 220px;
float: left;
margin-right: 20px;
background: green;
border: 0;
}
#main-content {
width: 720px;
float: left;
background: gray;
}
#content
{
width:960px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="layoutDemo">
<div id="left" class="aside innerPadding border">Left Sidebar</div>;
<div id="main-content" class="article innerPadding border">Main Content</div>
</div>
</body>
</html>
[解决办法]
这些类中（aside innerPadding border），只要有一个是设置了border宽度，padding,margin，且不为0值，总宽度就会超出
------解决方案--------------------
那估计你是在ie6下测试的，因为ie6的盒模型是不规范的。
[解决办法]
还有一种可能，你的代码处在浏览器的混杂模式下
[解决办法]
<!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" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0; border: 0; } .layoutDemo { width: 960px; background: #000; } #left { width: 220px; float: left; margin-right: 20px; background: green; border: 0; } #main-content { width: 720px; float: left; background: gray; } #content { width:960px; overflow: hidden; } </style> </head> <body> <div class="layoutDemo"> <div id="left" class="aside innerPadding border">Left Sidebar</div> <div id="main-content" class="article innerPadding border">Main Content</div> </div> </body> </html>
上面的代码就正常了,把<div id="left" class="aside innerPadding border">Left Sidebar</div>;层后面的分号去掉就可以啦,,层外面多加了一个分号了