display:table-cell not working on button element

Question

I\'m trying to style a sort of command bar. It must work in IE9, so flexbox is out. Instead, I\'m using a display:table layout.

The first snippet (using

Answer 1

The problem is that the <button> element cannot accept changes to the display property.

Certain HTML elements, by design, do not accept display changes. Three of these elements are:

• <button>
• <fieldset>
• <legend>

The idea is to maintain a level of common sense when styling HTML elements. For instance, the rule prevents authors from turning a fieldset into a table.

However, there is an easy workaround in this case:

Solution 1: Wrap each <button> in a div element.

OR

Solution 2: Use another element to submit the form data.

Note that some browser versions may actually accept a display change on a <button>. However, the solutions above are reliable cross-browser.

References:

• Bug 984869 - display: flex doesn't work for button elements
• Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context