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?
+1
A:
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]-->
wsanville
2010-05-26 01:49:49
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.
lowellk
2010-05-26 18:33:08
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.
wsanville
2010-05-27 01:56:43