web-dev-qa-db-ja.com

FlexboxとInternet Explorer 11（表示：<html>にflex？）

私は「浮遊」レイアウトから離れて、将来のプロジェクトのためにCSS flexboxを使うことを計画しています。現在のバージョンのすべての主要ブラウザが（何らかの方法で）flexboxをサポートしているように見えることを嬉しく思いました。

いくつかの例を見るために "Solbox by Flexbox" に行きました。しかし、 "Sticky Footer"の例は、Internet Explorer 11では動作しないようです。少し遊んで、display:flexに<html>を、width:100%に<body>を追加して動作させました。

だから私の最初の質問です：誰かが私にその論理を説明できますか？私はただいじってそれがうまくいったのですが、よくわかりませんなぜそれがそのようにうまくいったのか...

それから、あなたがそれを推測したInternet Explorer以外のすべてのブラウザで動作する "Media Object"の例があります。私もそれについていじっていましたが、何の成功もありませんでした。

したがって、私の2番目の質問は次のとおりです。「メディアオブジェクト」の例をInternet Explorerで機能させるための「クリーンな」可能性はありますか。

htmlcssflexboxcross-browser
90
Kodekan

によると http://caniuse.com/#feat=flexbox ：

「2013年9月現在のドラフト仕様によると、flexのIE10およびIE11のデフォルト値は0 0 autoではなく0 1 autoです」

つまり、あなたのCSSのどこかにflex:1があるとすれば、それはすべてのブラウザで同じように翻訳されるわけではありません。それを1 0 0に変更してみてください。そうすればすぐにそれがうまくいくことがわかるでしょう。

問題は、この解決策ではおそらくFirefoxがめちゃくちゃになることですが、その場合はMozillaだけをターゲットにして元に戻すためにいくつかのハックを使用することができます。

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

flexboxはW3Cの候補で公式ではないので、ブラウザは異なる結果を出す傾向がありますが、近い将来には変わるでしょう。

誰かより良い答えがあるなら、私は知りたいです！

134
Odisseas

IE10とIE11のmin-heightの問題を修正するには、別のフレックスコンテナを使用してください。

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

実用的なデモ を参照してください。

  • フレックスボックスレイアウトをbodyに直接使用しないでください。jQueryプラグインを介して挿入された要素（オートコンプリート、ポップアップなど）がめ​​ちゃくちゃになってしまいます。
  • コンテナにheight:100%やheight:100vhを使用しないでください。フッターがウィンドウの下部に固定され、長いコンテンツに適応しなくなります。
  • flex-grow:1ではなくflex:1を使用すると、flexのIE10およびIE11のデフォルト値は0 0 autoではなく0 1 autoになります。
41
BeliG

flex:1が必要です。それはIE11のための問題を解決します。私は2番目のOdisseasです。 さらに、HTML、body要素に100％の高さを割り当てます。

CSSの変更点

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

作業URL： http://jsfiddle.net/3tpuryso/13/

33
Ashok Kumar Gupta

これは、Internet Explorer 11およびChromeでも動作するflexの使用例です。

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>
0
BadTree Lu

スタイルの前に '-ms-'を追加するのと同じくらい簡単なこともあります。-ms-flex-flow：row wrapのように。それをうまく機能させるために。

0
Marsel Gray