4

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?

Kara
  • 6,115
  • 16
  • 50
  • 57
Ozzy
  • 10,285
  • 26
  • 94
  • 138
  • FWIW, I've found the path of least resistance to be setting all inputs to `border-box` in all browsers and then adding code to fix IE 7 (though I doubt that's what you wanted to hear). – Tim M. Oct 20 '12 at 01:08
  • I dont mind coding for content-box as Im used to it now, and all my designs are crossbrowser perfect, its just little quirky bugs that piss me off. just a minute ago i had an IE7 bug where an elements bottom margin was appearing underneath the following eleement aswell as itself T_T – Ozzy Oct 20 '12 at 01:10
  • If you really care that much about obsolete IEs, there is no better solution than using conditional comments: – Evgeny Oct 31 '12 at 18:11
  • then just use .ieX class for styling, for example: .button {/* normal styles */}, .ie7 .button {/* hacks to make it look right on obsolete IEs */} – Evgeny Oct 31 '12 at 18:13
  • I see you've tagged the question `pixel-perfect`, but is that a serious requirement? Using the same code in all browsers?? From a pragmatic point of view, the obvious answer is just to accept that IE6/7 have issues; work around it sufficiently to make it usable, but don't waste too much time making it perfect. Ask yourself (or your boss) how many visitors are using IE6/7 for the site, and how long before even those people upgrade. How much effort does the answer to that question justify? If the requirement stands after making that point then you have my sympathy. – Spudley Oct 31 '12 at 22:44

1 Answers1

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.

nynexman4464
  • 1,760
  • 1
  • 17
  • 19