Buttons cannot have display: flex in some browsers (Safari, notably)

[jfurrow]

http://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-element-in-some-browsers

We need to remove display: flex on button elements.

[jfurrow]

~~When we make this change, we must also set the line-height of the buttons so that the text is centered vertically.~~ Nevermind, we don't need to set the line-height.

[jfurrow]

Here's the fix I applied in DC/OS: https://github.com/dcos/dcos-ui/pull/1750

[ashenden]

@jfurrow I'm having a difficult time replicating this in Safari.

[jfurrow]

@ashenden Check out this pen in Safari, it illustrates the problem we encountered in DC/OS UI: http://codepen.io/yeahjohnnn/pen/XpbaWm

[ashenden]

Ah. But with text-align:center we can solve that. The bigger one that I can't seem to solve is the dropdown arrow :after element in FF. I have a half-ass fix for this here -- https://github.com/mesosphere/cnvs/pull/84

[jfurrow]

text-align: center works because Safari's not rendering the element with flex layout.

The dropdown's :after element in FF is a symptom of the same issue. If you change the button to an a or div it will render as expected.

I suggest we remove display: inline-flex and display: flex for button elements because it's not well supported. If we need flex containers inside buttons, we'll have to rely on a nested element.