Flexbox und Internet Explorer 11 (Anzeige: Flex in <html>?)

117

Ich plane, mich von "schwebenden" Layouts zu entfernen und CSS-Flexbox für zukünftige Projekte zu verwenden. Ich war erfreut zu sehen, dass alle gängigen Browser in ihren aktuellen Versionen (auf die eine oder andere Weise) Flexbox zu unterstützen scheinen.

Ich ging zu "Solved by Flexbox", um mir einige Beispiele anzusehen. Das Beispiel "Sticky Footer" scheint jedoch in Internet Explorer 11 nicht zu funktionieren. Ich habe ein bisschen herumgespielt und es durch Hinzufügen display:flexzum <html>und width:100%zum zum Laufen gebracht<body>

Meine erste Frage lautet also: Kann mir jemand diese Logik erklären? Ich habe nur rumgespielt und es hat funktioniert, aber ich verstehe nicht ganz, warum es so funktioniert hat ...

Dann gibt es das Beispiel "Medienobjekt", das in allen Browsern funktioniert, außer - Sie haben es erraten - Internet Explorer. Ich habe auch damit herumgespielt, aber ohne Erfolg.

Meine zweite Frage lautet daher: Gibt es eine "saubere" Möglichkeit, das Beispiel "Medienobjekt" in Internet Explorer zum Laufen zu bringen?

html css flexbox cross-browser Kodekan
quelle

1

Nur ein Update zu dieser alten Frage: Die verknüpfte Demo funktioniert gut auf IE11. Muss ein Fehler gewesen sein, der in den 3 Jahren behoben wurde, seit dies gefragt wurde.

Daryl

151

Laut http://caniuse.com/#feat=flexbox :

"Die Standardwerte für IE10 und IE11 für flexsind 0 0 autonicht 0 1 autogemäß dem Entwurf der Spezifikation ab September 2013"

Wenn Sie also irgendwo in Ihrem CSS so etwas haben : flex:1, wird das nicht in allen Browsern gleich übersetzt. Versuchen Sie es zu ändern 1 0 0und ich glaube, Sie werden sofort sehen, dass es funktioniert.

Das Problem ist, dass diese Lösung wahrscheinlich Firefox durcheinander bringt, aber dann können Sie einige Hacks verwenden, um nur Mozilla ins Visier zu nehmen und es zurück zu ändern:

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

Da flexboxes sich um einen W3C-Kandidaten handelt und nicht offiziell ist, liefern Browser tendenziell unterschiedliche Ergebnisse, aber ich denke, das wird sich in naher Zukunft ändern.

Wenn jemand eine bessere Antwort hat, würde ich gerne wissen!

Odisseas
quelle

1

Ich denke das bedeutet IE10 braucht -ms-flex: 1 0 0;und IE11 flex: 1 0 0;..?

Eystein

19

Mit Google Chrome 39 funktionierte dies plötzlich nicht mehr für mich. Ich habe ewig gebraucht, um es aufzuspüren, aber es war die Spezifikation der dritten Ziffer. Chrome 39 hält sich nicht daran flex: 1 0 0;. Aber flex: 1 0 0%;( beachten Sie die % ) oder flex: 1 0 auto;wird funktionieren.

Eystein

Ja, das stimmt, es hat auch einige meiner Designs gebrochen! Ich habe es behoben, indem ich es einfach in geändert habe. flex: 1;Ich denke, es hängt davon ab, was Sie wollen ...

Odisseas

1

Das Kernproblem bei IE11 ist die Art und Weise, wie es berechnet flex-basis. Github hat eine gute Diskussion darüber, warum es flex:1 0 100%in einigen Fällen für IE11 funktioniert, während es in anderen flex: 1 0 0%sogar flex: 1 0 autofunktioniert. Sie müssen den Inhalt im Voraus kennen.

P.Brian.Mackey

Von caniuse.com/#feat=flexbox wurde unter bekannten Problemen ausdrücklich erwähnt, dass IE 11 das Hinzufügen einer Einheit zum dritten Argument, der Flex-Basis-Eigenschaft, erfordert.

Henry Neo

49

Verwenden Sie einen anderen Flex-Container, um das min-heightProblem in IE10 und IE11 zu beheben :

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;
}

Sehen Sie sich eine funktionierende Demo an .

Verwenden Sie das Flexbox-Layout nicht direkt, bodyda es Elemente vermasselt, die über jQuery-Plugins (Autocomplete, Popup usw.) eingefügt wurden.
Verwenden Sie height:100%oder height:100vhauf Ihrem Container nicht, da die Fußzeile am unteren Rand des Fensters haftet und sich nicht an lange Inhalte anpasst.
Verwenden Sie flex-grow:1eher als flex:1Ursache IE10 und IE11 Standardwerte für die flexsind 0 0 autound nicht 0 1 auto.

BeliG
quelle

3

Ich fand ich musste hinzufügen , flex-direction: columnum .ie-fixMinHeightNebenwirkungen zu vermeiden. Wenn Sie kein IE-spezifisches HTML haben, können Sie es verwenden.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

Mark Horgan

Ich weiß, dass dies 2 Jahre alt ist, aber danke! Ich verfolgte diesen stackoverflow.com/a/24979148/359157 und kämpfte für immer, um herauszufinden, warum der IE kaputt ging, während Edge und Chrome einwandfrei funktionierten. Das heightvs min-heightwar der Schlüssel.

TyCobb

39

Sie brauchen nur flex:1; Es wird das Problem für den IE11 beheben. Ich stimme Odisseas zu. Weisen Sie HTML-Körperelementen zusätzlich eine Höhe von 100% zu .

CSS-Änderungen:

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;
}

Arbeits-URL: http://jsfiddle.net/3tpuryso/13/

Ashok Kumar Gupta
quelle

Könnten Sie bitte mehr zu diesem Problem erklären: Gibt es eine "saubere" Möglichkeit, das Beispiel "Medienobjekt" im IE zum Laufen zu bringen?

Ashok Kumar Gupta

1

Das funktioniert bei mir. Eine Sache, die ich gefunden habe (weil es mich aufgefallen ist), ist, dass, wenn Sie ein enthaltendes Element haben, die display: flex;und zugehörigen Stile sowohl auf den bodyContainer als auch auf den Container angewendet werden müssen : jsfiddle.net/Skateside/nezdrrkr

James Long

Wenn Sie die HTML-Höhe auf 100% maineinstellen, scheint der Inhalt nicht mehr richtig zu wachsen (zumindest in Chrom). Wenn Sie genügend Inhalte hinzufügen, wird die Fußzeile überlaufen. jsfiddle.net/3tpuryso/65

FoolishSeth

@FoolishSeth so wie es jetzt ist, sagst du im Grunde, dass es auf 100% wachsen soll und nicht ein Pixel mehr. Sie sollten das Set htmlzu min-height: 100%stattdessen mit dem Inhalt zu folgen

Odisseas

Vielen Dank! Der Teil, der mir fehlte, war eigentlich keines der Flex-Attribute, sondern die Höhe: 100% auf dem enthaltenden Element (was für mich ein .pusher div war, weil meine Site eine reaktionsfähige Seitenleiste enthält).

Zanther

0

Hier ist ein Beispiel für die Verwendung von Flex, das auch in Internet Explorer 11 und Chrome funktioniert.

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>

Erweitern Sie das Snippet

BadTree Lu
quelle

15

Bitte geben Sie zusätzliche Informationen an - anstatt nur Ihre einzufügen Html.

Peter

7

Obwohl diese Antwort wahrscheinlich richtig und nützlich ist, wird sie bevorzugt, wenn Sie eine Erklärung hinzufügen, um zu erklären, wie sie zur Lösung des Problems beiträgt. Dies ist besonders in Zukunft nützlich, wenn eine Änderung (möglicherweise ohne Bezug) dazu führt, dass sie nicht mehr funktioniert und die Benutzer verstehen müssen, wie sie einmal funktioniert hat.

Erty Seidohl

0

Manchmal ist es so einfach wie das Hinzufügen von: '-ms-' vor dem Stil Wie -ms-flex-flow: Zeilenumbruch; damit es auch funktioniert.

Marsel Gray
quelle

3

Manchmal, aber meistens nicht;) Lassen Sie uns IE global

entleeren

Flexbox und Internet Explorer 11 (Anzeige: Flex in <html>?)

Antworten: