[whatwg] Alignment of empty buttons

[Christian Biesinger]

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
<cbiesinger at 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