请问，css布局总宽度没超过父框架，为什么会错位？_html/css

请问，css布局总宽度没超过父框架，为什么会错位？_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:43:19

原创

1293人浏览过

本帖最后由 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值，总宽度就会超出

border， padding,margin 都为0，但还是有问题

220+20+720 == 960

那估计你是在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>

登录后复制

上面的代码就正常了,把

Left Sidebar

;层后面的分号去掉就可以啦,,层外面多加了一个分号了