Box-sizing:border-box and min-width problem in IE 9

Using box-sizing:border-box, when an inline-block element with a min-width is contained in an inline-block container, the container is too wide in IE 9. Works as expected in FF 10.0, Chrome 17.0, Opera 11.5 and Safari 5.1.2

by David_Knowles

HTML

<p>
    In IE9 the containers of both these boxes are affected by the min-width of their content elements in an incorrect way. You'll see the red backgrounds of the containers at the right in IE9.
    Seems like the containers get an extra width equal to the sum of the borders and the padding of the content elements.
</p>        

<p>
    The containers and the content elements have <b>box-sizing:border-box</b> and <b>display:inline-block</b>. The content elements have <b>min-width:260px</b>.
</p>

<p>
    By the way, <b>width</b> instead of <b>min-width</b> works like a charm.
</p>

<ul>
    <li>
        <a href="#">This has min-width set</a>
    </li>
</ul>

<div>
    <span>This has min-width set</span>
</div>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

li, div {
    display: inline-block;
    background-color: red;
    margin-bottom: 10px;
}

a, span {
    display: inline-block;
    padding: 10px;
    border: 20px solid lime;
    background-color: yellow;
    min-width: 260px;
}

body {
    margin: 30px;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

p {
    margin-bottom: 20px;
}