3

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

基本上每当我border与border-boxjs scrollHeight 结合时，它就会变得比想象的大 1px。正如您在示例中看到的，父元素没有设置高度，它overflow:auto;只是出于视觉目的显示出于某种原因出现了滚动条。

如果您尝试评论border-top或box-sizing，您会注意到滚动条消失并offsetHeight变为scrollheight。

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

更新

只是为了澄清-我在问为什么box-sizing与 with的组合border会导致这个问题？我是做错了什么还是有错误，或者这假设是预期的行为，我非常怀疑。

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

4

1 回答 1

6

改变：

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

到：

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

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

或者您可以保留 css 原样，但添加一个 height 属性到.jspane. 如果您不想设置高度，可以添加display:table;到.jspane

更新

只需阅读您的更新/编辑。我会说因为边框属性增加了高度/宽度。在你的情况下，你有 border-top: 1px solid #e0e0e0;for .item。您已将其设置为 35 像素的高度，但边框顶部在此基础上增加了 1 像素。如果您将高度从 34px 更改为 35px，那么这将解决它。在这里看到它：http: //jsfiddle.net/34TKp/3/

于 2013-03-03T19:26:33.347 回答