fantasai pointed out that CSS does specify this: "If the box does not have a baseline, align the bottom margin edge with the parent's baseline." (http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align)
Sounds like there's a bug in Firefox and (still) in Chrome dev. -christian On Thu, Apr 25, 2013 at 10:43 AM, Christian Biesinger <cbiesin...@google.com> wrote: > 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