display:table-cell not working on button element
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
-
The problem is that the
element cannot accept changes to thedisplayproperty.Certain HTML elements, by design, do not accept
displaychanges. Three of these elements are: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
in adivelement.OR
Solution 2: Use another element to submit the form data.
Note that some browser versions may actually accept a
displaychange on a. 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
讨论(0)
加载中...
- 热议问题