CSS邊界框邊框導致不必要的滾動條

我做這個例子http://jsfiddle.net/drulia/34TKp/CSS邊界框邊框導致不必要的滾動條

基本上每當我結合border與border-box的JS scrollHeight屬性變得更大1px的那麼假設是。正如你在例子中看到的，父元素沒有高度集，它只有overflow:auto;只是爲了視覺目的，以顯示出於某種原因滾動條出現。

如果你試評border-top或box-sizing，你會注意到滾動條消失，offsetHeight等於scrollheight。

這真的讓我發瘋，到目前爲止，我很高興我找到了導致這個問題的css屬性，但我很好奇，也許有人知道爲什麼事情會以他們發生的方式發生？這發生在FF，Chrome和IE10上，我只是沒有在範例中包含FF的前綴框大小。

更新

只是爲了澄清 - 我問的box-sizing爲什麼結合border原因這個問題？我做錯了什麼，或者有錯誤，或者這是一種預期的行爲，我很懷疑。

我知道簡單的修正，如改變overflow屬性，消除邊框等

來源

2013-03-03 Giedrius

它與父級的「overflow：auto」有關。盒子大小需要放在父級（jspPane）上，而不是放在'.item'上，它會工作。你也可以刪除'overflow：auto'並且它可以工作。不知道爲什麼會發生這種情況.. – slamborne 2013-03-03 19:41:27

變化：

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

要：

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

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

或者你可以保留css，但是可以將高度屬性添加到.jspane。如果你不希望設置一個高度，你可以添加到display:table;.jspane

UPDATE

剛剛看了你的更新/編輯。我會說，因爲邊界屬性增加了高度/寬度。在你的情況下，你有border-top: 1px solid #e0e0e0;爲.item。您已將它設置爲35像素的高度，但邊框頂部將1像素添加到此像素上。如果您將高度從34px更改爲35px，那麼這將修復它。在此處查看：http://jsfiddle.net/34TKp/3/

來源

2013-03-03 19:26:33 Omega

也許我沒有清楚我的問題，我知道這些簡單的修復，我也可以簡單地刪除框大小，但我的問題是爲什麼會發生？爲什麼框邊框與邊框的組合會導致這個問題，我做錯了什麼或有錯誤？ – Giedrius 2013-03-03 19:34:04

好吧我已經更新了我的答案，以清理事情。 – Omega 2013-03-04 00:11:45

這是一個很好的想法，它真的很有道理，用'box-sizing：border-box;'邊框成爲元素主高度的一部分，在這種情況下通過'1px'減少元素的可用空間，'line-height'不再適合內部，因此，一旦將其他像素添加到高度或刪除屬性'box-sizing'，爲什麼問題得到修復。感謝您的想法！ – Giedrius 2013-03-04 01:14:08

CSS邊界框邊框導致不必要的滾動條

回答

相關問題