IE6/IE7 Input Submit Box Model Dilemma

Question

Some strange bug I came accross today when creating a generic button class to style everything from divs to inputs. It seems that most browsers use a different box model when it comes down to input[type=submit].

Most modern browsers (ie9+, ff, chrome, etc) use the content-box box model for all inputs except submit which uses border-box if im not mistaken.

Basically, if I set a height of 100 and padding of 10 all around, the height of all inputs except submit would be 120 where as the height of submit would be 100.

This is easily fixed using box-sizing and its browser prefixes. But my problem is with IE6/7 which do the same thing but do not support box-sizing...

so now all my inputs display full height except for submit which is cut in half. What options do i have to force content-box or another fix apart from conditional comments?

Answer 1

IE's old "broken" box model is essentially content-box. In IE>5 the document needs to be in quirks mode for IE to use it. You can trigger quirks mode by doing one of the following (according to wikipedia):

• When the document type declaration is absent or incomplete;
• When an HTML 3 or earlier document is encountered
• When an HTML 4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present
• When an SGML comment or other unrecognized content appears before the document type declaration
• When there are errors anywhere in the document

Now of course, this probably makes more trouble than it's worth because it would make everything use the IE box model (content-box). I could see this being useful, but if your layout wasn't built this way, it's probably too much work to go back and change it.

I did some searching around and didn't find anything that would enable the old box model on certain elements, and not others.

Having dealt with IE6/7 in the past, there's really no way to get around it's buggy behavior without using something like conditional comments or css hacks. It's rendering engine is just fundamentally broken compared to other browsers. Trying to get it to behave without any hacks is just asking for headaches.

The only other thing I can think of is to surround each form element with a span or div, and use them to help size your form elements. This also sucks, but it has the advantage of at least working in every browser.