Internet Explorer 11 での Flexbox レイアウトの問題のトラブルシューティング方法

IE Flexbox のトラブルシューティング: 非互換性の克服

強力なレイアウト ツールである Flexbox を Internet Explorer 11 で使用すると、問題が発生する可能性があります。これに対処するには問題が発生した場合は、遭遇した特定の問題を詳しく掘り下げ、潜在的な可能性を探ってみましょう回避策:

1. Flex プロパティの解析の問題

IE は、短縮表現の flex プロパティの解析に苦労することがあります。これを解決するには、代わりに次のような長時間プロパティを使用することを検討してください。

/* Not working in IE11 */
flex: 0 0 35%;

/* Alternative */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;

2. Flex-Shrink の有効化

場合によっては、Flex-Shrink を有効にすることで問題を解決できることがあります。

/* Not working in IE11 */
flex: 0 0 35%;

/* Alternative */
flex: 0 1 35%;

3.フレックス ベーシスのパーセンテージと単位なしの値に関する注意事項

フレックス ベーシスのパーセンテージと単位なしの値の動作が異なる場合があるため、IE11 のバージョンを確認してください。次のバリエーションを試してください:

/* Variations */
flex: 1 1 0;
flex: 1 1 0px;
flex: 1 1 0%;

4. 「flex: 1」

「flex: 1」の代わりに「flex: auto」を使用すると、フレックス方向を切り替えるときに予期しない動作が発生する可能性があります。代わりに「flex: auto」の使用を検討してください:

/* Issue with 'flex: 1' */
flex-direction: row;
@media (max-width: 768px) {
    flex-direction: column;
}

/* Alternative with 'flex: auto' */
flex: auto;
@media (max-width: 768px) {
    flex-basis: auto;
}

5.従来の幅/高さのプロパティに戻す

他のすべてが失敗した場合は、昔ながらの幅と高さのプロパティを使用すると解決策が得られる可能性があります。

/* Not working in IE11 */
flex: 0 0 35%;

/* Alternative */
width: 35%;
height: 200px;

6.ブロック レイアウトの利用

特定のシナリオでは、フレックス レイアウトをブロック レイアウトに交換することを検討してください:

/* Not working in IE11 */
#footer-container > article {
    display: flex;
    flex-direction: column;
}

/* Alternative */
#footer-container > article {
    display: block;
}

これらの回避策を実装することで、IE 11 によってもたらされる課題を回避し、IE 11 を効果的に活用できます。レイアウト内のフレックスボックス。

以上がInternet Explorer 11 での Flexbox レイアウトの問題のトラブルシューティング方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。