css3-flexbox-Kompatibilität Probleme mit Firefox und Safari

Ich versuche, mich zu Sortieren, meine flexbox-layout, so ist es kompatibel mit den neuesten Versionen von IE/Firefox/Safari, und ich habe Probleme mit Firefox/Safari.

Vorgeschlagene layout:

-----------------
     header
-----------------
    |
    |
    |
nav |  section
    |
    |
    |
    |

In Firefox und Safari <section> ist unter nav

CSS:

body {
  width:50%;
  height:100%;
  display: -ms-flexbox;
  -ms-box-orient: horizontal;

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;

  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

header {
    padding-top:100px;
    -webkit-flex: 1 100%;
    -moz-flex: 1 100%;
    -ms-flex: 1 100%;
    flex: 1 100%;
}

nav {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width:10%;
    height:100%;
}

section {
    -webkit-flex: 4;
    -moz-flex: 4;
    -ms-flex: 4;
    flex: 4;
    width:40%;
    height:100%;
}

InformationsquelleAutor Neeta | 2013-07-04

  1. 9

    First off, ist dies:

    body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;
}

    Sollte dies sein:

    body {
  display: -ms-flexbox;
  display: -webkit-flex;
}
@supports (flex-wrap: wrap) { /* hide from the incomplete Flexbox implementation in Firefox */
    body {
      display: flex;
    }
}

    Dies nicht tun, da IE nicht über eine Umsetzung der 2009 Flexbox-Entwurf:

    body {
  -ms-box-orient: horizontal;
}

    Hast du auch Hinzugefügt, die die moz-Präfix, die auf den Eigenschaften von den standard-Flexbox-Entwurf, aber Firefox implementiert diese Präfix-frei (nur die 2009 Eigenschaften sollte ein moz-Präfix).

    Selbst wenn Sie fix alle diese Dinge, die es immer noch nicht funktionieren in Safari oder Firefox. Warum?

    • Bis iOS7 rauskommt, Safari hat nur eine Umsetzung der 2009 Flexbox-Entwurf. Es nicht zu implementieren box-lines: multiple, das ist, was ermöglicht die Verpackung in diesem Entwurf
    • Firefox hat eine Umsetzung für das Jahr 2009 Entwurf und dem standard-Entwurf", aber weder die Umsetzung unterstützt einwickeln.
    Danke für Eure Hilfe. Wie würden Sie empfehlen, beschäftigte ich mich mit Firefox/Safari? Polyfills?
    Ehrlich gesagt, ich empfehle nicht mit Flexbox-layout. Windows XP ist zu prominent für ein OS (es ist #2 in der Popularität), und Sie können nicht aktualisieren, über den IE8. Wenn Sie noch verwenden möchten Flexbox sowieso, dann haben Sie die Gruppe nav und Abschnitt zusammen mit einem zusätzlichen flex-container und tun, Weg mit der Verpackung (siehe: codepen.io/cimmanon/pen/rifzt).
    Wenn ich Weg von Flexbox, sollte ich nur normale Tabellen-markup-Code?
    Warum sollten Sie eine Tabelle verwenden? Tabellen sind für tabellarische Daten, nicht layout. stackoverflow.com/a/14220687/1652962

    InformationsquelleAutor cimmanon

Schreibe einen Kommentar