Issue with box-sizing border-box and min-width in IE 9

Question

I'm using the box-sizing:border-box model. When an inline-block element with a min-width is contained in an inline-block element (container), the container is too wide in Internet Explorer 9. Works as expected in FF 10.0, Chrome 17.0, Opera 11.5 and Safari 5.1.2.

See this jsfiddle

By the way, width instead of min-width works like a charm.

Any ideas?

Answer 1

Hi came across your post when Googling for a similar issue with IE 8, although IE 8 supports box-sizing and min-height/width, from my tests, it seems IE 8 ignores border-box when using min-height/width on the same element

E.g.

#box {
   min-height: 20px;
   padding:4px;
   box-sizing:border-box;
}

IE 8 height = 28px, Chrome 20 height = 20px;

Solution using css browser selectors http://rafael.adm.br/css_browser_selector/

#box {
       min-height: 20px;
       padding:4px;
       box-sizing:border-box;
  }

 .ie8 #box, .ie9 #box {
       min-height: 12px;
       padding:4px;

 }

Answer 2

My Issue

I see the border-box value being applied in IE8 developer tools inspector. Therefore, I know border-box is working, especially as expected when width(or height) is set. But since I am using min-height for my height (and OP is using min-width), my min value is not working. The issue is therefore:

IE's min-height/min-width does not factor in border-box

.box {
     padding: 30px;
     box-sizing: border-box;
     min-height: 200px;
}    

<div class="box">Awesome Box</div>

• IE8: 260px (30px from padding top and 30px from padding bottom). Does not work.
• FireFox: 200px height. (min's factor in border-box). Works.

My solution:

Don't put the padding on the same element as you put the min-values AND the border-box - (you may not need border-box sizing anymore if you separate these).

.box {
     box-sizing: border-box;
     min-height: 200px;
}
.box-inner {
     padding: 30px;
}  

<div class="box">
    <div class="box-inner">Awesome Box</div>
</div>