css - 为什么我的菜单 DIV 溢出了它的父级？

Question

菜单 div 溢出了父元素。

“科学不过是对自身的一种歪曲……”

<div id="header">
     <h1>TITLE</h1>
</div>
<div id="navwrap">
<ul class="nav">
    <li><a id="homenav" href="index.html">Home</a></li>
    <li><a id="linksnav" href="#">Links</a></li>
    <li><a id="contactnav" href="#">Contact</a></li>
<div class="clear"></div>
</ul>
</div>

/*
NAV BEGIN
*/

#navwrap {
    width: inherit;
    padding-top: 10px;
    padding-bottom: 10px;
    float:left;
    margin:0;
    font-family: "David Sans", "Trebuchet MS", Verdana, Sans-Serif;
    font-size:8px;
    background:#4a4a4a;
    color: #959595;
    border: 2px solid #202c28;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top: 0;
    clear: both; 
}

.nav {
    float:left;
    /* width:100%; */
    /* margin:0; */

}

.nav li {
    font-size: inherit;
    list-style:none;
    display:inline;
    /*padding:10px 2px;*/
    color: inherit;
}

.nav li a {
    margin:0px 0px;
    padding:7px;
    color: inherit;
    text-decoration:none;
    font-weight: bold;
}

.nav li a:hover {
    font-size: inherit;
    list-style:none;
    display:inline;
    background: #9ead72;
    color: #282828;
}

/*
NAV END
*/

/*
HEADWRAP BEGIN
*/
#headwrap {
    width: 880px;
    clear: both;
}
/*
HEADWRAP END
*/
/*
WATERMARK BEGIN
*/
#watermark {
    height:20px;
    margin:0px;
    padding:5px 20px;
    color:#787878;
    font-family: "David Sans", "Trebuchet MS", Verdana, Sans-Serif;
    font-size:8px;
    text-align:right;
    background:#383838 /*url(../img/tlcorner.gif) top left no-repeat */;
    border: 2px solid #202c28;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom: 0;
}

/*
WATERMARK END
*/

/*
HEADER BEGIN
*/

#header {
    height:80px;
    margin:0;
    padding:30px 20px;
    background:#3f3f3f  url(../img/headerbg.gif) bottom right no-repeat;
    color:#a8a5a5;
    font-size:95%;
    text-align:left;
    clear:both;
    border-left:2px solid #202c28;
    border-right:2px solid #202c28;
}


#header h1{
    margin:0;
    padding:0 20px;
    font-size:200%;
}

/*
HEADER END
*/

Answer 1

发生这种情况是因为在新的 W3C 盒模型中，填充、边框和边距被计算在内容区域的大小之外。在您的情况下，内容区域的宽度为 880px。菜单栏继承了这个宽度，但它的左右两侧有一个 2px 的边框，这增加了您看到的 4px 溢出。

要深入了解该主题，您可以查看 w3 docs在盒子模型上或这个 ADD 友好 explanation我会用的。

看来 CSS3 对这个问题有很好的解决办法。您可以更改框模型以包含边框，并填充到内容区域中。将以下声明添加到您的 navwrap 元素:

#navwrap {
    box-sizing: border-box;
}

CSS3 尚未正式化，因此每个人都有自己的实现。对于 mozilla，它称为 moz-box-sizing。

Quirksmode 发布了一个不错的 article关于您可能会觉得有帮助的主题。