[whatwg] Alignment of empty buttons

• From: Christian Biesinger <cbiesinger@google.com>
• Date: Thu, 25 Apr 2013 10:43:35 -0700
• To: whatwg@lists.whatwg.org
• Cc: Ojan Vafai <ojan@google.com>
• Message-ID: <CAPTJ0XEA_NMAB41UHg1cXXmQTRsxg2zhd9LCuSS2b6R2ZBSVig@mail.gmail.com>

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

Received on Thursday, 25 April 2013 17:44:00 UTC