Firefox中的Flexbox inline-flex错误

Question

我希望使用Flexbox来对齐按钮中的svg和文本,并且所有功能在Chrome和Safari中运行良好,但在Firefox中似乎存在问题.

这个codepen应该现场演示这个问题.请注意,我将https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss作为codepen中的外部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并不完全支持flexbox <button>元素.

这很奇怪,因为子框被封锁了,这就是为什么你看到不同行中的内容.但是,该按钮似乎没有建立flex格式上下文.忽略所有flex属性.

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

幸运的是,他们重新考虑并且错误984869重新开放.但是没有积极的工作.