html - CSS 宽度在页面中不匹配

Question

我有两个 div 包含在一个更大的 div 中，如下所示:

<div class="content-container">
    <div id="content">
    Bunch of text ... omitted
    </div>

    <div id="sidebar">
    </div>
</div>

这两个对应的css如下(长度略有改动):

#content {
margin: 0;
padding: 15px;
width: 720px;
height: 100%;
position: absolute;
left: 0;
border-left: solid;
overflow: auto;
}

#sidebar {
margin: 0;
padding: 15px;
width: 198px;
position: absolute;
right: 0;
height: 100%;
background-color: white;
border-style: solid;
}

.content-container {
position: relative;
width: 978px;
height: 1060px;
}

我有read宽度属性不包括填充。当我在 Chrome 中加载页面并检查元素时，content 的宽度为 705，而不是预期的 720。但是，sidebar 的正确宽度为 198px。有人有解释吗？

Answer 1

Does anyone have an explanation?

这是因为滚动条(由 overflow: auto 产生)。

存在一些与滚动条以及它如何包含在宽度计算中相关的跨浏览器不一致。在 Chrome 和 Safari 中，滚动条的宽度不包含在内容宽度中，而在 Firefox 和 IE 中，滚动条的宽度包含在内容宽度中。

在您提供的 jsFiddle 示例中，您会注意到在移除滚动条后，Chrome 中的内容宽度为 717px。对于滚动条，15px 将从内容宽度中减去(结果为 702px)。