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錯誤

回答

相關問題