box-sizing support in IE7

Question

I just discovered the box-sizing: border-box CSS property which solves a bunch of cross browser layout problems for me.

The only issue I now have is th

Answer 1

You can use a polyfill to make it work on some items, it didn't work for my input fields though.

https://github.com/Schepp/box-sizing-polyfill

box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);

Just note that the behavior url is relative to the page and not the css file. Use relative paths to site's root (start the url with an slash and then go from there).

Answer 2

I'm assuming you're using this to get around the IE6 box model. Unfortunately, there really is no general way to trick earlier versions of IE into supporting arbitrary CSS properties.

I would recommend not using the box-sizing property, because every browser other than IE6 will implement the box model correctly. The Wikipedia article does a good job of explaining how IE6 differs.

To solve this, I recommend using a separate style sheet for IE6, and including it using IE conditional comments. In your IE6 style sheet, you can specify different widths/heights/padding/margins to make your layout look consistent. You can include a style sheet for IE6 only like this:

<!--[if IE 6]>
  <link href="ie6sucks.css" rel="stylesheet" type="text/css" />
<![endif]-->

Answer 3

There are several ways to do this, none perfect.

As you point out:

• Firefox / Opera / Safari / Chrome / IE8+ will recognise the box-sizing property allowing you to use border-boxes.
• IE6 will use the old school (correct?) border-box model by default.
• However IE7 uses the W3C padding box model when in standards mode, and will not recognise the CSS box-sizing property so there's no way to revert to the border box model. If you need to support IE7 (and you probably still do), you're stuck with one of four options:

1. Conditional Comments:

<!--[if IE 7]>
  Special instructions for IE 7 here
<![endif]-->

Use box-sizing for IE8 and 9, then make specific overrides for IE7. This option will be painful.

2. The Schepp Box Sizing Polyfill:

https://github.com/Schepp/box-sizing-polyfill

This excellent Polyfill is an HTC file which modifies the default browser behavior in IE6 and 7 so they use the W3C box model. It's fine for light use, but may cause problems of it's own if used extensively. Use with caution and TEST.

3. Old Style Nested Divs:

The old style nested div approach is still a fine way:

<div style="width:100px; border:1px solid black">
  <div style="margin:10px">
    Content
  </div>
</div>

A non-semantic nested div provides the padding indirectly, with the disadvantage that your markup becomes untidy. Obviously don't use inline styles, I'm using them here for the sake of illustration.

The old adage Never use padding on a fixed width element still stands true.

4. My Preferred Solution - A Direct Child Selector:

The other way round this is with the direct child selector. Say you have a fixed width div containing some content:

<div class="content">
  <h1>Hi</h1>
  <p>hello <em>there</em></p>
</div>

You can then write a rule to add left and right margins to all the direct children of the div:

.content {
  width:500px;
  padding:20px 0;
}
.content > * {
  margin:0 20px;
}

This will add a little margin to the h1 and p, but not to the nested em, giving the appearance of 20px padding on the content div, but without triggering the box model bug.

5. Consider Dropping IE7 support

IE7 is the last browser not to recognise the box-sizing property. If you're getting little traffic from IE7, you might consider dropping support. Your CSS will be much nicer.

As of late 2013, this is my preferred option.

---

2017 EDIT: It's probably long past time to drop support for IE7 now, and just use border-box.