13

残念ながら、Web サイトのコードを Internet Explorer 10 と互換性を持たせる必要があり、公式 Web サイトのドキュメントを読んでも問題が発生しています。

ここに私のcssコードがあります:

.uberflex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;

    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;

    display: -ms-flexbox;
    -ms-flex-flow: column wrap;
    -ms-justify-content: flex-start;
    -ms-align-items: flex-start;
}

私の知る限り、ie10 は flexbox をサポートしていますが、'-ms-' プレフィックスのみをサポートしています。ie10 でコンソールを確認すると、「display: -ms-flexbox;」が表示されます。しかし、他の「-ms-」で事前に修正されたものはありませんか?? なぜこれが起こっているのか誰でも明確にできますか？

ありがとう！:-)

4

1 に答える 1

63

ええ、IE 10 のフレックスボックスは完全な悪夢です。

IE 10 flexbox のサポートに関するいくつかのヒントをいくつかのサイトから集めました (これは非常に役に立ちました)。

まず第一に - 非常に便利なフラグ (すべての要素に配置できます):

  • IE10 固有の CSS を分離するためのフラグ

    .lt-ie11 & { }

次の定義をコンテナ要素に配置する必要があります

  • Flex コンテナーを定義する

    display: -ms-flexbox;

.

  • 水平方向の配置:

    -ms-flex-pack: start/end/center/justify;

.

  • 垂直方向の配置

    -ms-flex-align: start/end/center/stretch/basline;

次の定義は、子要素 (「アイテム」)に配置する必要があります。

  • 要素の順序付け

    注文番号は正または負のいずれかです。数字が小さいほど、コンテナの開始点に近い要素が表示されます

    -ms-flex-order [number]

.

  • アイテムの拡大/縮小/優先サイズの設定

    これはフレックスボックスの重要な概念であり、余分または負の (不足している) スペースをフレックスボックス コンテナーの子要素間でどのように分割するかを制御します。

    基本的に、数値が大きいほど、優先サイズに余分なスペースが追加されるか (拡大の場合)、要素を適合させるために要素からより多くのスペースが差し引かれます (縮小の場合)。'0' の値が割り当てられている場合、要素のサイズは影響を受けません。

    -ms-flex: [grow shrink size];

    または、簡略版:

    -ms-flex: [value]; // == -ms-flex: value value 0

    明示的に定義されていない限り、IE10 はデフォルトの推奨サイズ を与えることに注意して0ください。これにより、要素が完全に消えてしまう可能性があります。pxこれは、明示的なサイズを (またはで%) 定義するか、または として定義することで軽減できますauto) 。


Flexbox の一般的な説明については、こちらを参照してください。クイック ルックアップはこちらです。

于 2014-01-23T11:06:01.700 に答える