Window size support in IE7

Question

I just discovered a CSS box-sizing: border-box property that solves browser cross-location issues for me.

The only problem I am facing right now is that IE7 does not seem to support it. Does it hack IE7 for support?

Answer 1

I assume that you are using this to get around the IE6 window model. Unfortunately, there 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 implements the window model correctly. The Wikipedia article pretty well explains how IE6 differs.

To solve this problem, I recommend using a separate stylesheet for IE6 and including it using IE conditional comments . In your IE6 stylesheet, you can specify different widths / heights / indents / margins to make your layout look consistent. You can enable the stylesheet for IE6 only as follows:

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

Answer 2

There are several ways to do this, none are perfect.

As you indicate:

• Firefox / Opera / Safari / Chrome / IE8 + recognizes the box-sizing property, which allows the use of border fields.
• IE6 will use the standard old-school model (right?) By default.
• However, IE7 uses the W3C padding field model in standard mode and will not recognize the CSS sizing property, so there is no way to return to the frame model. If you need to support IE7 (and probably you are still doing this), you are stuck in one of four options:

1. Conditional comments:

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

Use window size for IE8 and 9, then make certain overrides for IE7. This option will be painful.

2. Schepp Polyfill Scale Size:

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

This great Polyfill is an HTC file that changes the default browser behavior in IE6 and 7, so they use the W3C box model. It is great for use in light conditions, but can cause problems if it is used widely. Use with caution and test.

3. Old Style Nested Divs:

The old style of the nested div approach is still beautiful:

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

The non-semantic nested div provides the addition indirectly, with the disadvantage that your markup becomes untidy. Obviously don't use inline styles, I use them here for illustration.

An old adage Never use propiska on an element with a fixed width , is still preserved.

4. My preference - Direct choice of the child:

Another way to do this is with a 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> 

Then you can write a rule to add fields on the left and right to all direct children of the div:

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

This will add a bit of field to h1 and p, but not to the nested em, giving the appearance of a 20px padding in the content div, but without triggering an error in the box.

5. Consider resetting IE7 support

IE7 is the last browser that does not recognize the box-sizing property. If you get a little traffic from IE7, you might consider canceling support. Your CSS will be much nicer.

As of the end of 2013, this is my preferred option.

---

2017 EDIT: Probably a long time ago, to give up support for IE7 and just use the border-box.

Answer 3

You can use polyfill to make it work on some elements, however it did not work for my input fields.

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

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

Just note that the behavior url refers to the page, not the css file. Use relative paths to the root of the site (run the URL with a slash, and then from there).