IE10 の Flexbox が予測できない幅でレンダリングされるのはなぜですか?

IE10 フレックスボックスの難題: クロスブラウザーの謎

IE10 のフレックスボックスの謎めいた動作にイライラしていませんか?それはあなただけではありません。最新のブラウザで広く採用されているにもかかわらず、IE10 での flexbox サポートにはまだ多くの要望が残されています。

典型的な例としては、フォーム レイアウトの問題があります。

`

.flexbox form { </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: flex;
flex-direction: row;

ログイン後にコピー

}

.flexbox フォーム入力[type=submit] {

width: 31px;

}

.flexbox フォーム入力[type=text] ] {

width: auto;
flex: auto 1;

}`

理論的には、このレイアウトは input type= 「テキスト」は残りのスペースをシームレスに埋めます。ただし、IE10 では、入力 type="text" のデフォルトの幅が 263 ピクセルという複雑な幅に固定されています。

問題の核心は、IE10 のフレックスボックス仕様の部分的な実装にあります。これは、特定の機能が欠けている仕様の中間バージョンをサポートします。残念ながら、これらの機能が欠けているため、レイアウトは期待どおりに動作しません。

この問題に対処するには、次のようなアプローチを検討してください。

• CSS プレフィックスを使用する: IE10 が応答する-ms-flex などの特定の CSS プレフィックスに追加します。
• CSS ポリフィルを使用します: Flexboxie のようなポリフィルは、IE でフレックスボックス機能をエミュレートできます。
• フォールバック以前のレイアウト方法へ: IE10 との互換性を確保するために、従来のレイアウト方法 (フロートやテーブルなど) を採用することを検討してください。

IE の将来のバージョンでは、より堅牢なフレックスボックス サポートが導入される可能性があるため、ブラウザの更新に注目してください。 。それまでは、これらの戦術は、IE10 のフレックスボックスというクロスブラウザーの謎を解決するのに役立ちます。

以上がIE10 の Flexbox が予測できない幅でレンダリングされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。