Why do HTML <buttons> adhere to the old IE5 box model in all modern browsers?

Question

I've had a weird issue with a button and some CSS, I noticed that it was behaving as if it adhered to the old IE5 box model, where height = height + padding.

After some browsing I came across this article which confirmed my assumptions but didn't explain why this is the case.

Does anybody know why ALL modern browsers (Firefox, Chrome, IE9) treat button elements like this? And does anybody know of a workaround to make button elements use the box model that (as far as I can tell) ever other element in those browsers uses?

Answer 1

I never even realized that buttons act this way, but I generally don't use input elements and opt to fashion div equivalents since they are far easier to style and make look the same in all browsers.

A work-around to make buttons scale like div elements could be to set the box-sizing attribute to content-box, which is the default value for divs:

button, input[type=button], input[type=submit]
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Here's an example on JSFiddle.