[UPDATE: Firefox trunk builds have been modified to align with the questioner's expectations regarding this issue. This adjustment is expected to be implemented in Firefox 52, scheduled for release in March 2017.]
Here are a few key points:
The display
property has minimal impact on a <button>
element in Firefox, as detailed in https://bugzilla.mozilla.org/show_bug.cgi?id=984869. It mainly allows you to specify whether the button should be block-level or inline-level. This behavior is consistent across Chrome and Firefox for <table>
and <fieldset>
elements as well.
The wrapping effect you're observing is due to a flexbox quirk – elements with display:flex
cause their children to become block-level. Consequently, your <svg>
and <span>
elements transition from their default display:inline
to display:block
, each occupying its own line. This occurs even though the button isn't technically transformed into a flex container because the style system interprets the styles only and treats all children as blocks when it encounters display:flex
at the parent level. While this behavior may seem like a potential Firefox bug, further clarification is needed.
So, if your intention is to apply dipslay:flex
to a <button>
, the proper approach involves adding an inner wrapper-div within the <button>
to enclose the <svg>
and <span>
elements, thereby allowing you to style the wrapper as a flex container.
Below is an updated code snippet eliminating the -moz
prefixed version since, as indicated by another response, -moz-flex
isn't recognized in any supported Firefox versions:
div.buttonContents {
display: -webkit-flex;
display: flex;
align-items: center;
}
button.primary {
padding: 10px 20px;
}
svg {
width: 15px
}
<button class="primary add-student">
<div class="buttonContents">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
<path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V88.6h33.9c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V65.2C130.4 63 129.6 61.2 128.1 59.6z"></path>
</svg><span>Add Student</span>
</div>
</button>