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?

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