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

Question

I had a weird problem with a button and some CSS, I noticed that it behaved as if it was sticking to the old IE5 window model, where height = height + padding.

After some viewing, I came across this article , which confirmed my assumptions, but did not explain why this is so.

Does anyone know why ALL modern browsers (Firefox, Chrome, IE9) handle such button elements? And does anyone know of a workaround for button elements to use a window model that (as far as I can tell) has ever used another element in these browsers?

Answer 1

I didn’t even understand that buttons act in this way, but I don’t use input elements or select modular div equivalents, since they are much easier to style and look the same in all browsers.

A workaround for creating buttons, such as div elements, may be to set the box-sizing attribute to the content-box , which is the default value for the div:

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

Here is a JSFiddle example .

Answer 2

The funniest thing about this question right now is that some of the more senior users of the JS / CSS community have started using a very compatible version of this box model in their production projects.

box-sizing : border-box will make most modern browsers behave like inputs.
Watch: Paul Irish - Border-Box FTW

The immediate benefit is to line up faster, without having to play with negative fields, unless you really intend to do the superimposed z-index overlays of the fixed / non absolute elements.

Answer 3

<button> considered as an inline tag, then it naturally does not use the W3C box model.

This is purely logical, but I agree, completely disturbing. Now the point is, why is it not considered a block tag?

 button { width: 100px; padding: 0 30px; } #a { display: inline; } #b { display: block; } #c { display: inline; box-sizing: content-box; } #d { display: block; box-sizing: content-box; } 

 <button id="a">aaa</button> <button id="b">bbb</button> <button id="c">ccc</button> <button id="d">ddd</button>