Box-Sizing Support in IE7

IE7 - box-sizing not working even for fixed width element

Unfortunately IE7 doesn't support box-model: border-box and uses the W3C content box model instead. There are a couple of options here - use a polyfil or write specific IE7 rules in a conditional comment.

box-sizing: border-box = for IE8?

IE8 supports the unprefixed version of box-sizing, but as with all "new" CSS features it only does so in standards mode. -ms-box-sizing has never been used by any version of IE.

Make sure your page has a doctype declaration to trigger standards mode in browsers. You should also place your unprefixed box-sizing after all the prefixes, not before them, and get rid of -ms-box-sizing as it's really not needed.

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

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;

 }

IE6/IE7 Input Submit Box Model Dilemma

IE's old "broken" box model is essentially content-box. In IE>5 the document needs to be in quirks mode for IE to use it. You can trigger quirks mode by doing one of the following (according to wikipedia):

• When the document type declaration is absent or incomplete;
• When an HTML 3 or earlier document is encountered
• When an HTML 4.0 Transitional or Frameset document type declaration is used and a
  system identifier (URI) is not present
• When an SGML comment or other
  unrecognized content appears before the document type declaration
• When there are errors anywhere in the document

Now of course, this probably makes more trouble than it's worth because it would make everything use the IE box model (content-box). I could see this being useful, but if your layout wasn't built this way, it's probably too much work to go back and change it.

I did some searching around and didn't find anything that would enable the old box model on certain elements, and not others.

Having dealt with IE6/7 in the past, there's really no way to get around it's buggy behavior without using something like conditional comments or css hacks. It's rendering engine is just fundamentally broken compared to other browsers. Trying to get it to behave without any hacks is just asking for headaches.

The only other thing I can think of is to surround each form element with a span or div, and use them to help size your form elements. This also sucks, but it has the advantage of at least working in every browser.

---

Related Topics