Html 盒子模型的问题

我有一个称为#profile grid的容器，我希望它的宽度为330px。它包含一个330px宽的图像和一个330px宽的图像下方的内联列表，图像周围有一个1px的边框。我希望列表和图像的宽度完全相同。在IE中，它的线条非常完美，但在Chrome中，它太短了2倍。我做错了什么

正如标题所示，问题在于盒子模型

最好的方法是显式设置框模型，然后使用多边形填充使其适用于较旧的浏览器。Paul Irish在这里描述了问题和解决方案：

我已经在更新的小提琴中展示了它的外观：

本质上，不同的盒子型号在宽度中包括边框和填充物还是在宽度外部添加边框和填充物方面有所不同。

:

HTML:

注:

• 是块元素。无论父对象的宽度如何，它都会随之增长。有点像是100%自动的。给父级330px，它也会变成330px

• 只要块元素没有指定的宽度，它的100%宽度将包括其边框。因此，如果您有330px的父元素，则块元素（在本例中为
  ）将为298px宽+1px左边框+1px右边框

• 另一方面，为其指定宽度将在计数中排除边框，从而导致溢出

• 给出一个图像

  显示：block

  和

  宽度：100%

  也可以做同样的事情，而且它可以保留图像比率（并且不会以任何方式挤压它）

---

​

为避免此问题，最好不要在同一元素上混合使用

宽度

和

填充

或

边框

在您的情况下，如果您只需从

.listed

中删除

宽度：330px

，然后将其添加到

.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;
}

列出的

div#

宽度为330px，边框两侧各加1个像素。这就是“标准”盒子模型的工作原理。将宽度每边减少1个像素（即298px），所有内容都将对齐

---

。。。在好的浏览器中。在旧版本的IE中，您会看到一个问题。请使用有效的DOCTYPE，这将被解析。

图像是否应该在右侧有此黑色“条纹”？

#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;
}

#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;
}