Firefox中的Flexbox inline-flex错误

Question

我希望使用Flexbox来对齐按钮中的svg和文本，并且在Chrome和Safari中一切正常，但在Firefox中似乎存在问题。

此codepen应该实时演示此问题。 请注意，我在代码集中将https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss作为外部CSS表格。

http://codepen.io/dominicchapman/pen/EgNgoq

SCSS如下：

.Button {
  border: 0 none;
    height: 32px;
    padding: 0 16px;
    font-size: 14px;
    background-color: orange;
    color: white;

  .Icon {
        fill: white; 
    }

    &:hover, &:active {
        background: red;
    }
}

.Button__icon {
  @include inline-flex;
  @include align-items(center);
  .Icon {
    margin-right: 11px;
    height:16px;
    width:6px
  }
}

非常感谢任何帮助。提前谢谢。

Answer 1

问题是Firefox并不完全支持<button>元素中的flexbox。

这很奇怪，因为儿童盒被封锁了，这就是为什么你看到不同行中的内容的原因。但是，该按钮似乎没有建立flex格式上下文。所有flex属性都将被忽略。

我理解不支持按钮上的flexbox，但IMO这种奇怪的混合是无稽之谈。然而，mozilla人没有看到任何问题。

幸运的是，他们重新考虑并重新开放了bug 984869。但是没有积极的工作。