IE6 / IE7 Input Send Model Field Dilemma

Question

Some strange mistake that I encountered today when I create a common class of buttons to style everything from divs to inputs. Most browsers seem to use a different box model when it comes to typing [type = submit].

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

Basically, if I set the height to 100 and fill 10 around, the height of all inputs except submit will be 120, where the height of the view will be 100.

This can be easily set using the window size and its browser prefixes. But my problem is with IE6 / 7, which do the same but don't support window size ...

so now all my inputs display the full height, except for the send, which is cut in half. What options do I have to force a content box or other fix separately from conditional comments?

Answer 1

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

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

Now, of course, this probably creates more problems than it costs, because all this will use the IE box model ( content-box ). I could see that this is useful, but if your layout was not built in this way, there is probably too much work to go back and change it.

I searched a bit and did not find anything that would allow using the old window model for certain elements and not others.

Having looked at IE6 / 7 in the past, there is no way around this erroneous behavior without using something like conditional comments or css hacks. The rendering mechanism is simply fundamentally broken compared to other browsers. Trying to get him to behave without any hacks just requires headaches.

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