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 前端能夠盡早擺脫對較低版本瀏覽器內核的兼容吧，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/83638.html
標籤：Html/Css
下一篇：10個超好用的配色網站