2017-01-25 7 views
1

Ich baue eine Webapp, die mit mindestens IE10 +, Chrome, Firefox und iOS in Cordova verpackt sein muss.Cross-Browser Flexbox Kompatibilitätsprobleme

Es funktioniert sehr gut auf Chrome. Aber es stellt sich heraus, jedes Mal, wenn ich einen Nebenfehler in IE oder Firefox behebe, erzeugt es einen Fehler auf iOS und umgekehrt.

Das neueste Problem ist auf Firefox und iOS zurückzuführen. Vor dem Update funktionierte iOS (Overflow-x scrollte gut), aber Firefox respektierte nicht seine Elternbreite und die rechte Flex-Box war nicht auf dem Bildschirm. Sobald ich das Problem in Firefox behoben hatte, funktionierte der Überlauf-Scroll bei iOS nicht mehr.

In Bezug auf IE10 respektieren einige verschachtelte Flexboxen auch nicht die Breite ihrer Eltern und die letzte Box ist halb aus dem Bildschirm (?).

Haben Sie eine zuverlässige Quelle für Cross-Browser-Entwicklung mit Flexbox? Ich habe bereits eine Reihe von Anleitungen ausprobiert, aber sie helfen, einen Fehler in einem Browser zu beheben und einen neuen in einem anderen Browser zu erstellen ...

EDIT: Eine vergleichende Tabelle, die erläutert, wie jeder Browser mit Eigenschaften umgehen würde sei großartig.

Danke.

+0

Poste ein minimales funktionierendes Code-Snippet, das das Problem reproduziert – LGSon

+0

Es gibt eine Menge Probleme, wenn du versuchst, das zu tun, was du fragst, also kann es aufgrund deiner Markup-Struktur wirklich unordentlich werden. Wenn wir das Markup sehen, können wir vorschlagen, wofür und wo Flexbox zu verwenden ist – LGSon

+0

Vielen Dank für die Antwort. Ehrlich gesagt wäre es schwer, einen PLNKR zu erstellen, der genau die Probleme darstellt. Die gesamte Schnittstelle besteht aus Flexboxen und ich bin mir ziemlich sicher, dass Elemente wie

Probleme verursachen können ... Es zwingt dazu, eine unnötige Box zu erstellen ... Also ja, das Markup wird unordentlich:/Nun, eine zuverlässige Verbindung zu einigen Eine gute Ressource wäre eine große Hilfe. – kfa

Antwort

2

Es ist möglich, dass das, was Sie erreichen wollen, mit flexbox nicht machbar ist, was nicht vollständig von allen Browsern unterstützt wird, die Sie auflisten.

Flexbox ist bekanntermaßen fehlerhaft auf IE10 und benötigt möglicherweise Präfixe in vielen der Browser, für die Sie bauen. Im Folgenden finden Sie eine gute Quelle, um herauszufinden, welche Browser ein bestimmtes Feature vollständig unterstützen: http://caniuse.com/#search=flexbox.

Sie können den Abschnitt "bekannte Probleme" finden, der relevant ist, um herauszufinden, ob die Probleme, die Sie haben, dokumentiert sind.

Einige spezifische Informationen über die aufgetretenen Fehler können helfen, eine spezifischere Antwort zu liefern.

+0

Danke für den Link, aber ich kenne bereits allgemeine Probleme, aber ich hätte gerne eine vergleichende Tabelle, um zu sehen, wie Browser Eigenschaften interpretieren. Mit flex-basis anstelle von Höhe/Breite konnten viele Probleme behoben werden.Jetzt muss ich sehen, warum Überlauf zwischen Browsern unterschiedlich funktioniert. – kfa