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

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添加height属性。 如果您不想设置高度，则可以添加display:table; 到.jspane

UPDATE

只需阅读您的更新/编辑。 我会说，因为border属性增加了高度/宽度。 在您的情况下，您有border-top: 1px solid #e0e0e0; 对于.item 。 您已将其设置为35px的高度，但边框顶部将其添加了1px。 如果您将高度从34px更改为35px，则可以解决此问题。 在这里查看： http : //jsfiddle.net/34TKp/3/