Flexbox IE10 Breite Fragen

Das problem ist, dass im IE10 wird die Breite der Spalten innerhalb der Zeile wird falsch berechnet, es erscheint zu sein indem auf die Breite der Spalte Rand (insgesamt 80px), aber in Firefox und Chrome, es berechnet es perfekt und passt alles in 1260px. Das Hauptproblem ist, dass ich als Präfix alles, was ich glaube, ist der richtige Weg, aber ich bekomme immer noch das Problem.

Sehen Sie hier auf jsFiddle - http://jsfiddle.net/andyjh07/ue2zfga6/

CSS:

.row {
  width: 100%;
  position: relative;
  background: red;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  margin-bottom: 40px; }

  .row:after {
    content: "";
    display: table;
    clear: both; }

  .row *[class^="col-"] {
    position: relative;
    display: block;
    height: auto; }

    .row *[class^="col-"]:first-child {
      margin-left: 0; }
  @media (min-width: 64em) {
    .row {
      box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      flex-direction: row;
      -ms-flex-direction: row; } }
  @media (min-width: 78.75em) {
    .row {
      max-width: 78.75em;
      margin: 0 auto; } }


.col-one-third {
  width: 100%;
  background: blue; }
  @media (min-width: 64em) {
    .col-one-third {
      width: 33.3%;
      margin-left: 40px; } }


.col-two-thirds {
  width: 66.7%;
  margin-left: 40px;
  background: blue; }

Sieht es auf Chrome, IE11, Firefox
Flexbox IE10 Breite Fragen

Sieht es auf den IE 10, emuliert innen IE11 die dev-Konsole/tools
Flexbox IE10 Breite Fragen

Wie Sie sehen können, ist die Marge, die Hinzugefügt werden und die über die Breite des Containers

Hast du look in der kompilierten CSS um zu sehen, ob es die Erzeugung der Ergebnisse, die Sie erwarten? Die Sass-code ist hier irrelevant, weil es nie an den browser geliefert.
Natürlich habe ich geschaut, das ist der Punkt. Das kompilierte css ist, indem everying. Ich werde die kompilierten Teil zu, so dass Sie sehen können
Ich habe Hinzugefügt, so dass Sie sehen können. Wie bereits erklärt, funktioniert es in Firefox und Chrome, es ist nur ie10, ist, daß Sie die Frage. Diese laufen in einem emulator jedoch
Nicht reproduzieren können, oder ich wollte nicht verstehen, Ihr problem richtig. Könnten Sie bitte screenshots Anhängen von falschen und Verhaltensweisen zu erwarten.
2 Sekunden, ich werde ein paar

InformationsquelleAutor Andy Holmes | 2015-04-10

  1. 44

    Habe ich nicht den IE10 verfügbar, aber es scheint, dass Sie sollten Blick auf caniuse.com und die bekannten Probleme. Oder vielleicht user-moderierte Liste auf Github. Oder vielleicht den Kommentar-Abschnitt von der css-tricks guide.

    Der caniuse Webseite erwähnt:

    IE10 und IE11 Standardwerte für flex sind 0 0 auto eher als 0 1 auto gemäß dem Entwurf der Spezifikation, als der September 2013.

    und

    In IE10 und IE11, Container mit display: flex und flex-direction: column wird nicht richtig berechnen gebeugt Ihre Kinder-Größen, wenn die container mit min-height, aber keine explizite height-Eigenschaft.

    Die Github-Seite erwähnt:

    Bei der Verwendung von align-items:center auf einem flex-container in der Spalte Richtung, den Inhalt von flex posten, wenn zu groß, wird über Ihre container in IE 10-11.

    Abhilfe

    Meisten der Zeit, dies kann behoben werden, indem einfach die Einstellung max-width:100% auf die flex-Element. Wenn die flex-Element hat ein padding-oder border-set, Sie müssen auch sicherstellen, dass die Verwendung von box-sizing:border-box zu berücksichtigen, dass der Raum. Wenn die flex-Element hat einen Rand, mit Hilfe von box-sizing allein wird nicht funktionieren, so müssen Sie möglicherweise verwenden Sie ein container-element mit padding statt.

    Diese Kommentar zu css-tricks zeigt, dass dort, wo man normalerweise sagen würde flex: 1; Sie sagen sollte -ms-flex: 1 0 auto;

    Auch, sollten Sie Ihren code, wo es nicht so etwas wie dieses:

    -webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;

    :

    -webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

    Du willst immer die richtige Linie der code,—das eine ohne Flaggen— an der Unterseite der Präfix-Liste.

    Danke für die info, Josef. Wenn Sie einen Blick auf die Frage nun, ich habe screenshots, wie es aussieht in Chrom, und wie sieht es in der emulierten ie10
    Ich aktualisiert meine Antwort, und ich bin mir ziemlich sicher, dass der Auszug aus der Github-Liste der flexbox-Fehlern ist, die Sie zu tun haben.
    Naja... das ist peinlich. Ich vergaß hinzuzufügen flex: 1 auf die tablet - /desktop-Ansicht. Hinzugefügt, Hinzugefügt, Ihre ms-flex: 1 0 auto; sowie für Sicherheits-und es sieht okay aus. Haha, ich danke Ihnen so sehr

    InformationsquelleAutor Joseph Hansen

Schreibe einen Kommentar