使用ボタンレイアウトの互換性の問題フレックス
電話システムの低いバージョンでは、私たちが見つかりました。buttonあなたはCSSで指定しても、コンテナなどのFlexことはできませんdisplay: flex、まだ動作しません、また互換性のプロパティに変換されているとautoprefixer。特定のパフォーマンスは、使用が中心、例えば、そのコンテンツとレイアウトアラインメントを曲げることができません。
ここでの背景は、私たちはしばしばいくつかのボタンを表示する必要があり、ユーザーが特定のアクションを実行するためにクリックすることができるということです。あなたは、単に置けば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"より多くのそれはより迷惑です書き込んだ後、ボタンの数を。2番目の質問については、我々は一般的に（テキストのみのノードが存在する）ボタンがに包まれたコンテンツを置くことができます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が、この方法では、伝統的なアラインメントプログラムの賛成でフレックスレイアウトを放棄することと同じです。フレックス水平レイアウトが仕事をしないためと、私たちは、垂直方向にも働くことができる期待することはできません。
検索した後、私たちはその見つかったイオン・チーム/イオン＃5310を元に、プログラムを提供してbutton表示レイアウトまたはそのままブロックまま、のフレックスレイアウトにプロパティ内spanの要素。テストした後、我々は上で動作することができます（と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;
}
}プログラムは、私は今のコードがある参照、これまでイオンプロジェクト以来使用されてきたbutton.scss＃L43 ＃L241。これは、ブラウザのバグの早期実現にフレックスボックスを既知の情報をカウンターチェックされ、そして誰かが既に回避策を与えている、参照Flexbug＃9 - いくつかのHTML要素は、Flexコンテナできるわけではありませんよ。
2020年には、私はあなたが裕福、より新しい、より良い携帯電話と交換することができるにスプリントすることを願って、だけでなく、できるだけ早くそれの下位バージョン互換性のあるブラウザカーネルにWebフロントエンドを取り除きたいです。