使用Firefox中的flexbox,<button>中的文本和图像不会保持在同一行

Question

我想显示一个带图像和文字的按钮.文本和图像必须居中并位于同一行/行上.

在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;
}

的jsfiddle

Answer 1

某些HTML元素按设计不接受display更改.其中三个元素是:

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

例如,display: table不会工作fieldset.

同样,施加display: inline-flex到button将被浏览器忽略.

还有其他合理的限制.例如,一些浏览器会忽略overflow: scroll的button要素.(经过测试:Firefox,没有滚动; Chrome,是的)

所以,底线,一个button元素不能是一个flex容器.

最简单的解决方法是换行的内容button的div,使div柔性容器.或者(如评论中所述)使用a span而不是a div,因为这样可以保持标准符合性.

HTML

<button href="#">
    <div>
        <img src="http://placehold.it/10x10">
        <span>Click me</span>
    </div>
</button>

CSS

div {
    display: flex;
    justify-content: center;
    align-items: center;
    }

DEMO

注意:虽然它们不能是弹性容器,但button元素可以是弹性项目.

在这里了解更多:

• 错误984869 - 显示:flex不适用于按钮元素
• 错误1176786 - 上的Flexbox会阻止内容,但不会建立Flex格式上下文