ホームページ >ウェブフロントエンド >CSSチュートリアル >IE10 のフレックスボックスの問題を解決するにはどうすればよいですか?

IE10 のフレックスボックスの問題を解決するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-11-18 07:54:02428ブラウズ

How Can I Fix Flexbox Issues in IE10?

IE10 のフレックスボックスの問題のトラブルシューティング

IE10 のフレックスボックス実装は、非ネイティブ サポートが原因で予期しない動作を示す可能性があります。この問題は、IE10 が古いバージョンのフレックスボックス仕様を使用しているため、制限が生じているために発生します。

これらの問題に対処するには、次の点を理解することが重要です。

  • フレックスボックスは、IE10 では完全にはサポートされていません。ネイティブ機能としての IE。
  • IE10 は、3 月に対応する仕様の「トゥイーン」バージョンを実装します。 2012 W3C ドラフト。
  • それ以来、フレックスボックス仕様の現在のバージョンはいくつかの改訂を受けています。

報告された特定の問題

報告されたIE10 でフレックスボックスが正しく動作しない問題は、意図したコード内で最新のフレックスボックス構文を使用していることが原因です。 IEとの互換性のために。具体的には:

  • display: flex 宣言は、IE10 でサポートされていない構文を使用しています。

解決策

解決するにはこの問題では、IE10 の「トゥイーン」実装でサポートされている構文を使用するようにコードを調整します。プレフィックス付きのプロパティが含まれます:

.flexbox form {
    display: -ms-flex;
    -ms-flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -ms-flex;
    -ms-flex: auto 1;
}

これらの変更は IE の「トゥイーン」フレックスボックス実装をターゲットにしており、予想される動作を復元する必要があります。

追加リソース

クロスブラウザーのフレックスボックス互換性の詳細については、次を参照してください。リソース:

  • [Mozilla Flexbox ガイド](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
  • [CSS-トリック: 使用方法フレックスボックス](http://css-tricks.com/using-flexbox/)
  • [W3C フレックスボックス仕様](http://dev.w3.org/csswg/css-flexbox/)

以上がIE10 のフレックスボックスの問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。