Question

我做了这个例子http://jsfiddle.net/drulia/34TKp/

基本上每当我将border和border-box组合在一起时，js scrollHeight变得比它大1px更大。正如您在示例中看到的那样，父元素没有设置高度，它只有overflow:auto;仅用于视觉目的，以显示出于某种原因滚动条出现。

如果您尝试发表评论border-top或box-sizing，您会发现滚动条消失且offsetHeight等于scrollheight。

这真让我疯狂，到目前为止，我很高兴我找到了导致这个问题的css属性，但我很好奇，也许有人知道为什么会发生事情的发生？这种情况发生在FF，Chrome和IE10上，我只是没有在FF中包含前缀的框大小。

更新

只是为了澄清 - 我问为什么box-sizing与border的组合导致了这个问题？我做错了什么或有错误，或者这是一种预期的行为，我很怀疑。

我知道简单的修复，比如更改溢出属性，删除边框等等。

Answer 1

变化：

.jspPane {
    position: absolute;
    overflow: auto;
}

要：

.jspPane {
    position: absolute;
    overflow: hidden;
}

http://jsfiddle.net/34TKp/2/

或者您可以保留css，但是将高度属性添加到.jspane。如果您不想设置高度，可以将display:table;添加到.jspane

<强>更新

只需阅读您的更新/编辑。我会说因为border属性增加了高度/宽度。在您的情况下，您border-top: 1px solid #e0e0e0;已获得.item。你设置它的高度为35px，但是border-top在它上面增加了1px。如果您将高度从34px更改为35px，那么这将解决它。请在此处查看：http://jsfiddle.net/34TKp/3/

带边框的CSS边框导致不必要的滚动条

1 个答案: