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

2013-06-25

请问，css布局总宽度没超过父框架，为什么会错位？本帖最后由 corn8888 于 2013-05-10 21:35:51 编辑!DOCTY

请问，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>;层后面的分号去掉就可以啦,,层外面多加了一个分号了

热点排行

CSS

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

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