button 使用 flex 佈局的兼容性問題

button 使用 flex 佈局的兼容性問題

在低版本的手機系統中，咱們發現 button 不可以做爲 flex 容器，即便在 CSS 中指定了 display: flex 且 autoprefixer 也已經轉換成兼容屬性，也仍是不起做用。具體表如今其內容並不能使用 flex 佈局對齊，好比說居中。

這裏的背景是，咱們常常須要展現一些按鈕，用戶可點擊執行特定的操做。若是隻是簡單把 div 寫成按鈕的樣子，裏面直接寫文本的話，會產生至少兩個問題： 1. 語義和無障礙都不夠友好； 2. 低版本手機文本節點不能對齊。

<div class="btn">
    我是一個按鈕
</div>

.btn {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
}

爲了解決第一個問題，咱們直接使用標準的 button 標籤便可。不考慮使用 a 標籤緣由是既要處理默認的點擊行爲，也要爲了 a11y 指定 WAI-ARIA 的 role="button" ，按鈕數量多了以後寫起來就比較煩人。而對於第二個問題，咱們通常可把按鈕的內容（這裏只有一個文本節點）包裹在 span 裏。

<button class="btn">
    <span>我是一個按鈕</span>
</button>

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    
    & > span {
        color: #fff;
    }
}

但上面這種方案，通過測試發如今低版本系統上仍是有問題，文本並無被居中！這個時候咱們能夠選擇把 span 設爲 width: 100% 並設置文本居中屬性 text-align: center ，但這種方法至關於放棄了 flex 佈局，轉而使用了傳統的對齊方案。並且既然水平方向的 flex 排版不起做用，咱們也不能指望垂直方向的也能正常工做。

通過搜索，咱們發現 ionic-team/ionic#5310 提供了一種方案，原來的 button 仍是保持 block 的顯示佈局不變，將 flex 佈局的屬性設置在裏面的 span 元素上。經測試，這種方案在咱們須要兼容的機型（ and 4.4.4+ / iOS 8.4+ ）上都能正常工做。

.btn {
    display: inline-block;
    
    & > span {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
    }
}

該方案一直被 ionic 項目沿用至今，我目前看到的代碼位於 button.scss#L43 #L241 。反查資料可知這是 flex box 在早期瀏覽器實現的 bug ，並早已有人給出了 workaround ，詳見 Flexbug #9 - Some HTML elements can't be flex containers 。

2020 年了，但願你們都能往小康衝刺，都能換上更好更新的手機，也但願 Web 前端可以儘早擺脫對較低版本瀏覽器內核的兼容吧。