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 that IE7 doesn't seem to support it. Is there a hack to get IE7 to support it?

Defense

This is indeed a very good question. Although IE7 in itself is hardly used anymore, there are still a good number of companies and government departments that have their IEs in compatibility mode. Which is as good as the same as them behaving like IE7, and even IE11 offers that mode setting. – Dextral

Answer 1

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]-->

Malti

Thanks for the info. It's unfortunate that once ie7 moved to doing things the standard way, there's no way to get the old behavior back. I think I prefer the ie6 box model more than the w3c one, but I guess we're stuck with the w3c one now. – Defense

That is a good point, that IE7 made a significant change to how IE renders. As for backwards compatibility, that's one use of the doctype, not specifying one will make IE revert to quirks mode, which is the IE5.5 rendering engine I believe. – Malti

By the way, consider partial dropping IE7 support by using approach with isolated simplified stylesheet. – Rothrock

@Defense - The W3C box model makes far more sense when it comes to doing all this but this space is far too small to go into the details. – Johiah

Being able to switch box model is important, especially when styling form elements like textarea and input[type=text]. Width 100% will not work in many cases here. I think it's wrong of you to call it the ie6 box model since w3c actually defines both box models. – Diesel

But if you use 'box-sizing: border-box' all the browsers behave like IE6 except IE7. Frankly the w3c box model is a nightmare when your doing CSS layouts because you can't add padding/borders to the areas without blowing the whole layout. It kinda sucks. – Alexine

I agree, the w3c box model is a nightmare, box-sizing was a much welcomed attribute. What I do for ie7 when an element appears a different size to other browsers is use the ie7 only css hack *width: 200px; which allows me to set a different set of parameters for ie7 – Unrepair

Guys, you're all wrong about IE6. IE6 implements the standard W3C box-model, IE5/5.5 were the last versions with the border-box-like behavior... – Easiness

Where's your answer, @Christoph? My answer basically says "just deal with it" while the most upvoted answer isn't actually an answer at all. @Spectrogram has the best answer for providing alternate approaches, which is where my upvote has went. – Malti

I don't understand all this about IE6 implementing the W3C standards box model. It doesn't, and I wrested with the fact it doesn't for years, but there are enough people here saying that it does to make me doubt myself. – Spectrogram

Answer 2

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.

Spectrogram

+1 This really is the best way to support ie6/7/8 and the rest of the world. Everyone renders margins the same you you never have to worry about it. If you have to support ie6/7/8 (and plenty still do) then it's best to get used to never adding padding and nesting your divs. In a perfect world we could argue semantics but in a perfect world every browser would white-board what they're going to support and what they weren't. But they don't. They don't care. – Scalpel

Again, IE6 supports W3C box model, not the border-box-like one! – Easiness

IE6 supports border box model, but not the W3C box model. IE7 supports the W3C box model, but not the border box model. IE8+ support both, and you can choose between them. To support IE7, use one of the above solutions. If you're happy to drop IE7, use box-sizing:border-box. – Spectrogram

I just read somewhere that .content > * should be avoided since it is rather slow (in contrary to just the * selector itself). – Mewl

.content > * is slower, but it's extremely unlikely your CSS selectors will be the bottleneck. We are talking milliseconds here. – Spectrogram

Answer 3

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).

Maggiemaggio

I used to boxsizing.htc but it idiopathically interferes with page JS – Lutenist

Published under the LGPL, not suitable for commercial projects. – Buttonwood

@Buttonwood LGPL does not forbid commercial use. It only requires you to distribute some code. I find it exceptionally unlikely that any court would rule your server-side code needs to be published as a result of running LGPL code on a different machine in the user's browser. – Allerus

I would say URLs relative to the site root, an absolute URL may look like something like this mydomain.com/css/micss.css – Excrescence