Flexbox - unterschiedliches Verhalten der Browser

Elfangor93 · 23. Juli 2019

Auf der folgenden Seite habe ich beim Kontaktformular das Problem, dass das Feld "E-Mail" bei einigen Browsern nicht korrekt dargestellt wird.

Problemseite: https://tech.spuur.ch/kontakt

Login-Informationen (die Seite ist offline)
BN: Support
PW: y\EHiP6LMfq6%g?

In Firefox wird das Formular korrekt dargestellt:

Bei Chrom und Edge wird das Feld "E-Mail" unterhalb von "Name" ausgegeben statt daneben. Das verwendete Template nutzt das CSS-Framework Spectre welches wiederum die CSS Flexbox für das Lyout verwendet. Ich habe bereits alles mögliche versucht, um das Feld "E-Mail" auch unter Chrom und Edge rechts neben "Name" zu bekommen, bin jedoch gescheitert...

Falls jemand von euch das Problem lösen kann, wäre ich enorm dankbar!

Lg

Manuel

Harmageddon · 23. Juli 2019

Spannend... Chrome und Edge scheinen flexbox nicht für fieldset-Elemente zu unterstützen, IE und Firefox schon: https://github.com/w3c/csswg-drafts/issues/321

Es gibt auch entsprechende Diskussionen zu diesem Verhalten, das aber anscheinend niemand so richtig erklären kann, mal mit mehr Engagement (Chrome), mal mit weniger (Edge).

Kannst du mal nachgucken, ob dein Template für das Kontaktformular ein Override verwendet? Dann könntest du m.E. dort einfach die "fieldset"-Tags durch normale "div"s ersetzen. Das sollte der Funktionalität hier nicht abträglich sein.

Elfangor93 · 24. Juli 2019

Hallo und vielen Dank!

Wenn ich die fieldset-Elemente durch divs ersetze funktioniert alles wunderbar. Darauf wäre ich vermutlich niemals gekommen...