web-dev-qa-db-ja.com

Flexbox IE9の代替

最初はChromeでWebサイトを開発しました（設計が最も簡単です）が、今ではIEサポートモデルに到達しています。

そうは言っても、IE11から始めて、IEとChromeの風変わりな違いに必要な変更を加えました。しかし、今ではIEバージョンをステップダウンしています。 IE10のCSSでWebページの90％を正しく表示することができました。しかし、今では、これら2つのブラウザー用のCSS要素のほとんどは、IE9にはほとんど関係ありません。

可能であれば、ブラウザ固有の複数のスタイルシートを用意する必要はありません。

最初の問題は、CSSのflexboxモデルのIE10 +実装を変換することです。

flexboxコンテナの現在の実装：

div#navContainer{
    display: flex; //Current browsers (IE11, Chrome, etc)
    display: -ms-flexbox; //IE10 implementation
}

div#TeamsSection {
    text-align: center;
}

div.NavSection {
    margin: 0px 7px;
    padding: 4px 0px 0px 0px;
}

div#teams {
    margin: 0px;

    select {
        margin: 0px;
    }
}

HTML：

<div id="navContainer" class="float-left">
    <div id="LogoSection" class="NavSection">
        <div id="Logo">
            <img src="Images/Logo.png" />
        </div>
    </div>
    <div id="TeamsSection" class="NavSection">
        <label>Select a Team:</label><br />
        <div id="teams"></div>
    </div>
    <div id="UserSection" class="NavSection hidden">
        <label>Select a User:</label><br />
        <div id="requestor"></div>
    </div>
</div>

IE9はFlexboxを実装していないことを知っているので、すでに行った研究をin辱しないでください。できるだけHTMLを変更できないようにする同等の実装が必要です。

htmlcssinternet-explorercross-browserflexbox
39
GoldBishop

modernizr を使用して、flex機能が存在するかどうかを検出し、必要に応じてフォールバックスタイルを提供します。 Modernizrは、flexbox、no-flexbox、およびflexbox-legacyなどのクラスをhtml要素に追加するため、スタイルで次を使用できます。

    .container {
        display: flex;
    }
    .no-flexbox .container {
        display: table-cell;
    }

Zoe Gillenwaterの（ @ zomigi ）主題に関するプレゼンテーション、特に Leveling Up With Flexbox（Smart Web Conference-September 2014） を読むことを強くお勧めします

  • スライド21：水平ナビゲーション間隔> display: inline-block;
  • スライド62：flexbox> display: table-cell;なしの要素のピン留め
  • スライド70,71：フォームフォールバックの整列
  • スライド88,91：フレックス注文の有無による例

また、彼女のプレゼンテーション CSS3 Layout には、フレックスボックスを使用した場合と使用しない場合のレイアウトのいくつかの適切なプレビューがあります。

  • スライド73：flexboxでインラインブロックを使用する：水平型
  • スライド79：フレックスボックスでインラインブロックを使用する：水平ナビゲーション

私のための持ち帰りのいくつか：

  • ブラウザのサポートie10 +はかなり良い caniuse
  • auto-prefixr を使用して、ブラウザのプレフィックスを処理します
  • modernizrを使用してフォールバックを提供する
  • 「フレックスボックスはすべてかゼロではない」@zomigi
74
ptim

上記の答えは好きですが、modernizrを使用する必要はありません。 ie9にはテーブルレイアウトを使用し、その他にはflexboxを使用できます。

.container {
    display: table-cell; // ie9
    display: flex;       // others
}
45
Scott Romack

1年後、JavaScriptを使用して古いブラウザーのレイアウトを調整するこのソリューションは、興味深いようです=> https://github.com/10up/flexibility

Githubにはほぼ2000のスターがありますが、最後のコミットは3か月前であり、まだアクティブに維持されているかどうかはわかりません。

9
Michael Rambeau