Flexbox - unterschiedliches Verhalten der Browser

  • 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

  • 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.