960512 - Display: table-cell does not work with button elements

Status: UNCONFIRMED

(Core :: Layout, enhancement, P5)

Description

[Jon Rimmer]

Attachment: table-cell-button-bug.html

User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.29 Safari/537.36

Steps to reproduce:

1. Apply a display: table-cell style to a button element.


Actual results:

The button continued to be laid out as default.


Expected results:

The button should have been laid out like a td or th element.

See the attached test-case for a demonstration of the problem. Chrome displays the same problem. IE11 gets it right.

Comment 1

[Boris Zbarsky [:bzbarsky]]

This happens because <button> is a replaced element with a special box type, so changing its display type can't give it a table-cell box type.

You get the same effect with <img>, in all browsers, for the same reasons.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Oh, and there are spec proposals to not give <button> a special box type, but they are not web-compatible, so...

Comment 3

[Jon Rimmer]

I don't quite follow. A replaced element is supposed to be one whose appearance is controlled outside of CSS, but every aspect of a <button> can be controlled via CSS: Its dimensions, padding, margins, border, font, colors, etc. In what meaningful sense is it a replaced element, other than that it's considered a form element, and the spec says form elements are replaced?

Also, what do you mean by proposals not being web-compatible? IE11 supports this, so it's clearly possible to implement.

Comment 4

[Boris Zbarsky [:bzbarsky]]

> but every aspect of a <button> can be controlled via CSS

Actually, no.  <button> has vertical-centering behavior (and actually horizontal-centering behavior as well) that's not implementable in CSS, for example.

> Also, what do you mean by proposals not being web-compatible?

They would break the way buttons auto-center their content, which sites depend on.

> IE11 supports this

IE11 supports styling a button as display:table-cell, not the proposals I mentioned.

Once CSS has distinct concepts for display-outside and display-inside, this could be done, by the way, by only doing special stuff for the button display-inside type and then allowing the outside to look like whatever.  But implementing that is a pretty major architectural undertaking.