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?

Chaudoin

max-width has the same problem – Tilley

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;

 }

Sandpit

Thanks for this confirmation, I've seen it happening on a website I am developing and suspected this was the case but just wanted to confirm since officially min-height/min-width is supported. I <3 IE8 :) – Venous

Thanks @htmlr. I'm not at all happy having to set the min-height/width in two different ways, nor being forced to use "css browser selectors". Still, since this seems to be a bug in IE 8/9 your solution makes some sense. – Chaudoin

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>

Stivers

Thanks. Your solution is nice and may well be used as the accepted answer. The reason I preferred @htmlr's answer is that when I eventually drop support for IE 8/9 I don't have to change the HTML, but just cut out the .ie8/.ie9 rules in the CSS. – Chaudoin

Answer 3

I don't have a solution for this, but came across the question while googling for a fix myself. Fortunately, in my case, I'm able to get by for now with setting the width instead of min-width, although that might be a problem in the future.

Anyway, I just wanted to add that the same problem exists if the min-width element and its container are both floated instead of inline-block, as well.

Here's an update to the original fiddle showing it with float: left: http://jsfiddle.net/5Ng7k/24/

Cystic