[whatwg] Alignment of empty buttons

Christian Biesinger cbiesinger at google.com
Thu Apr 25 10:43:35 PDT 2013


Hi,

I had to recently investigate issues with the alignment of empty
buttons, i.e. <button></button>, and I noticed some browser
differences.

Specifically, take this testcase:
http://plexode.com/eval3/#s=aekVQXANJVQMbAx14Hz1PdQFcAYMbARIYUVkcAYYOfp8Zo6WFn6KkXphDVlVVUE+bnZ8aEawBsk8dEJaYmB11HwEdtLa4H8PNt08fA14A

Where should the button be positioned relative to the input field (or
if you prefer, the baseline of the block)? Chrome dev, IE and Opera
put the bottom of the button a bit higher than the bottom of the
input, whereas Firefox seems to approximately center the button on the
line (though without using vertical-align:middle).

Chrome stable puts the top of the button slightly below the top of the input.

Any suggestions for what the right behavior here is...? Note that this
isn't an entirely academic question, because websites do use empty
buttons (styling them with a width, height and background image).

-christian


More information about the whatwg mailing list