我有一个button由一个<i>和一个<span>元素(一个图标和一些文本)组成.现在两者都有不同的尺寸,所以我在我的按钮上应用了一个flexbox,它可以很好地集中我的物品.在Chrome中,一切都按预期工作,但在当前FF中使用页面会导致包含按钮的内部内容.图标通过:before伪元素显示.
谁在这里错了？是FF还是Chrome(和我).我应该怎样做才能在浏览器中获得相同的结果(文本前的图标,垂直中心,没有换行)？
我在使用flexbox输入组的Firefox（Chrome上不错）上遇到了问题-select输入将文本输入推出了容器。
我提取了一些标记，并在下面复制了相关样式：
.column.names {
width: 48%;
float: left;
}
select {
min-width: 6em;
align-items: center;
justify-content: center;
width: 7em;
}
input {
width: 100%;
}
.input_group {
display: flex;
}<div class='column names'>
<div>
<label for="user_name">Name</label>
<div>
<div class='input_group'>
<select name="user[title]" id="user_title">
<option value=""></option>
<option selected="selected" value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Other">Other</option>
</select>
<input maxlength="255" size="255" type="text" name="user[name]" id="user_name" />
</div>
</div>
</div>
<div>
<label for="user_company">Company</label>
<div>
<input maxlength="255" size="255" type="text" value="" name="user[company]" id="user_company" />
</div>
</div>
</div>https://jsfiddle.net/j9s0fk8c/
为了明确起见，名称选择+输入框的组合宽度应与公司输入框的宽度相同。
再次，这在Chrome中还不错，但是由于某些原因，flexbox无法解决Firefox中的问题（这只是我们不得不处理的一系列怪异问题中的一个）
我想显示一个带图像和文字的按钮.文本和图像必须居中并位于同一行/行上.
在Firefox中,图像和文本始终位于不同的行上.我怎么解决这个问题？
这就是我所拥有的:
button {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
}
button img {
order: 0;
flex: 0 1 auto;
align-self: auto;
}
button span {
order: 0;
flex: 0 1 auto;
align-self: auto;
}