Flexbox中的Flexbox内联flex错误

我正在寻找使用Flexbox来对齐svg和按钮内的文本，并且所有功能在Chrome和Safari中都能正常工作，但在Firefox中似乎存在问题。Flexbox中的Flexbox内联flex错误

此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 
    } 
}

任何帮助将不胜感激。提前致谢。

来源

2016-09-20 Dominic

看来[这已被问]（http://stackoverflow.com/q/35464067/1529630）。如果我误解了问题，我现在不会关闭，我没有其他浏览器来比较结果。 – Oriol

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

这很奇怪，因为子框被阻塞，这就是为什么你看到内容在不同的行。但是，该按钮似乎没有建立一个flex格式化上下文。所有的flex属性都被忽略。

我会理解不支持按钮上的flexbox，但IMO这种奇怪的组合是废话。但是，mozilla的人没有看到任何问题。

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

来源

2016-09-20 17:13:33 Oriol

“但是，mozilla的人没有看到任何问题。”是的，Mozilla仅仅因为可以偏离标准而已知。（我的意思是，*所有人*都这么做，但是Moz的理由不是像其他人那样“拧规范”，而是“规范让我做任何我想做的事”。自由。） – BoltClock

@BoltClock是的，他们说“这有点手动波浪”，“所有这些东西的规格基本上不存在”，... – Oriol

Flexbox中的Flexbox内联flex错误

回答

相关问题