Testing box-sizing with min/max-width/height in IE8

box-sizing with min/max-width/height doesn't work the same in Webkit, Firefox, and IE8/9

HTML

<h1>Testing box-sizing with min/max-width/height in IE8</h1>

<div class="test-case">
  <p class="control">control</p>
  <p class="test">test</p>
</div>
    
<p>The above paragraphs should both be 100px wide.</p>
<p>Both have <code>box-sizing: border-box</code>.</p>
<p>The "control" paragraph has a <code>width</code> of 100px.</p>
<p>The "test" paragraph has a <code>min-width</code> of 100px.</p>
<p>In IE8, the "test" paragraph is wider. The 20px padding is added to the <tt>min-width</tt> of 100px (instead of being contained within the <code>min-width</code>) resulting in a 140px wide "test" paragraph.</p>

<h2>Error on CSS-Tricks box-sizing page</h2>
<p>I believe there is an error on <a href="http://css-tricks.com/box-sizing/">css-tricks.com/box-sizing</a> in the "Notes" section which states that box-sizing "also works with <code>min-height, min-width, max-height, max-width</code>".</p>

<h2>Additional Tests</h2>
<p>The <code>max-width</code>, <code>min-height</code>, and <code>max-height</code> properties also suffer from the same issue.</p>

<div class="test-case">
  <p class="control-max-width">max width control</p>
  <p class="test-max-width">max width test</p>
</div>

<div class="test-case test-case-height">
  <p class="control-min-height">min height control</p>
  <p class="test-min-height">min height test</p>
</div>

<div class="test-case test-case-height">
  <p class="control-max-height">max height control</p>
  <p class="test-max-height">max height test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>

<p>The min/max-height properties are also broken in Firefox 11.0 Mac.</p>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
p {
    margin: 0 0 20px 0;
    clear: both;
}
.test-case {
    overflow: hidden;
}
.test-case p {
    text-align: center;
    padding: 20px;
    float: left;
    color: white;
}
.control {
    width: 100px;
    background: green;
}
.test {
    background: tan;
    min-width: 100px;
}
.control-max-width {
    background: green;
    width: 100px
}
.test-max-width {
    background: tan;
    max-width: 100px
}

.test-case-height p {
    clear: none;
    width: 200px;
}

.control-min-height {
    background: green;
    height: 100px;
}
.test-min-height {
    background: tan;
    min-height: 100px;
}

.control-max-height {
    background: green;
    height: 100px;
}
.test-max-height {
    background: tan;
    max-height: 100px;
}