Question

我有一个容器，我称之为#profile-grid，我希望它的宽度为330px。它包含一个330px宽的图像和一个330px宽的图像下面的内联列表，周围有1px边框。我希望列表和图像的宽度完全相同。在IE中，它排列完美，但在Chrome中，它的速度太短了2px。我究竟做错了什么？ http://jsfiddle.net/ZPQUP/13/

Answer 1

问题是，如标题所示，框模型。

最好的办法是明确设置盒子模型，然后使用polyfill使其适用于旧浏览器。 Paul Irish在这里描述了问题和解决方案：http://paulirish.com/2012/box-sizing-border-box-ftw/

我已经在这里更新了小提示：http://jsfiddle.net/mstauffer/ZPQUP/14/

基本上，不同的盒子模型在边框和填充是否中包含或从外部添加到宽度方面有所不同。

Answer 2

DEMO：

HTML：

<div id="profile-grid">
    <img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/428132_268919676513976_100001878373747_678116_241912084_n.jpg"/>
    <ul id="listed">
            <li class="item"><a href="#"> Profile </a></li>
            <li class="item"><a href="#"> About </a></li>
            <li class="item"><a href="#"> Photos </a></li>
            <li class="item"><a href="#"> Albumlist </a></li>
        </ul>    
</div>

CSS：

#profile-grid {
    height: 302px;
    width: 330px;
}

#profile-grid img {
    display: block;
    width: 100%;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

#listed {
    height: 50px;
    border: 1px solid #ddd;
    overflow: hidden;
}

li.item {
    margin: 0px;
    display: inline;
    float: left;
    height: 50px;
    border-left: 1px solid #ddd;
    display: inline;
}

#listed li a {
    display: block;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 15px;
    color: #123454;
    line-height: 50px;
    padding: 0px 15px 0;
    text-align: center;
    text-decoration: none;
    vertical-align: baseline;
}

#listed li a:hover{
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 15px;
    color: white;
    background-color: #123454;
    text-align: center;
    text-decoration: none;
}

注意：

<ul>是一个块元素。无论父母的宽度如何，它都随之增长。一种自动100％。给父母330px，它也是330px。
只要块元素没有指定的宽度，它的100％宽度将包含它的边框。因此，如果您的父元素为330px，则块元素（在本例中为<ul>）将为298px宽+ 1px左边框+ 1px右边框。
指定宽度会排除计数中的边框，从而导致溢出。
提供图像display:block和width:100%也会做同样的事情加上它保留图像比例（而不是以任何方式压缩它）

Answer 3

要避免此问题，最好不要在同一元素上混用width和padding或border。

在您的情况下，如果您只是从width: 330px移除.listed并将其添加到.listed ul，那么您应该没问题：

#listed {
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    height: 50px;
    overflow: hidden;
    border: 1px solid #ddd;
}



#listed ul {
    margin: 0px 0px 0px -1px;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    width: 330px;
}

Answer 4

您的div#listed宽330px 加上 1个像素，用于边框。这就是“标准”盒子模型的工作原理。将宽度减少每边1个像素（即298像素），一切都会排成一行......

...在好的浏览器中。在旧版本的IE中，您会看到一个问题。使用有效的DOCTYPE即可解决。

盒子模型的麻烦

4 个答案: