title: CSS border-box with border causes unnecessary scrollbar
body: <p>I have made this example <a href="http://jsfiddle.net/drulia/34TKp/" rel="nofollow">http://jsfiddle.net/drulia/34TKp/</a></p>
  
  <p>basically whenever I combine <code>border</code> with <code>border-box</code> the js scrollHeight becomes 1px bigger then it suppose to be. As you see in example the parent element has no height set, it has <code>overflow:auto;</code> just for visual purposes to show that for some reason scrollbar appears.</p>
  
  <p>If you try to comment <code>border-top</code> or <code>box-sizing</code>, you'll notice that scrollbar disappears and <code>offsetHeight</code> becomes equal to <code>scrollheight</code>.</p>
  
  <p>It really driving me crazy and so far I'm glad that I found what css properties causing this problem, but I'm curious maybe someone knows why things happen the way they happen?
  this happens on FF, Chrome and IE10, I just didn't included prefixed box-sizing for FF in example.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Just to clarify - I'm asking why combination of <code>box-sizing</code> with <code>border</code> causes this problem? Am I doing something wrong or there is a bug, or this suppose to be an expected behaviour, which I'm very doubt.</p>
  
  <p>I do know about simple fixes, like changing overflow property, removing border, etc.</p>