Flexbox funktioniert nicht auf den button oder fieldset-Elemente

Ich versuche, Zentrum innere Elemente einer <button>-tag mit flexbox ist justify-content: center. Aber Safari nicht center Sie. Ich kann den gleichen Stil zu jedem anderen tags und es funktioniert wie vorgesehen (siehe <p>-tag). Nur der button ist Links ausgerichtet.

Versuchen Sie Firefox oder Chrome, und Sie können den Unterschied sehen.

Gibt es eine user-agent-Stil, den ich überschreiben? Oder, eine andere Lösung zu diesem problem?

CSS:

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

HTML:

<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

Und ein jsfiddle:
http://jsfiddle.net/z3sfwtn2/2/

InformationsquelleAutor Ingemar | 2016-02-17
  1. 111

    Das Problem

    Das problem ist, dass einige Browser noch nicht entwickelt, die <button> - element eine flex (oder grid) container.

    Mehr technisch, in einigen Browsern die <button> element nicht akzeptieren, die änderungen an seinen display Wert, jenseits der Wechsel von block und inline-block. Dies bedeutet, dass ein <button> element kann nicht ein <table> entweder.

    Kann Ihnen dieses Verhalten auch anwenden zu <fieldset> und <legend> Elemente.

    Siehe die bug-reports unten für mehr details.

    Hinweis: auch wenn Sie nicht flex-Container, <button> Elemente können flex-Elemente.

    Die Lösung

    Gibt es eine einfache und einfache cross-browser-Lösung für dieses problem:

    Wrap-der Inhalt der button im span, und stellen Sie die span die flex-container.

    Angepasst, HTML (gewickelt button Inhalte in einer span)

    <div>
    <button>
        <span><!-- using a div also works but is not valid HTML -->
            <span>Test</span>
            <span>Test</span>
        </span>
    </button>
    <p>
        <span>Test</span>
        <span>Test</span>
    </p>
</div>

    Eingestellt CSS (gezielte span)

    button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

    Überarbeitete Demo

    Referenzen /Bug-Reports

    Flexbox auf ein <button> blockifies den Inhalt, aber nicht die Schaffung eines flex-Kontext Formatierung

    Benutzer (Oriol Brufau): Die Kinder der <button> sind blockified, wie bestimmt die flexbox-spec. Jedoch, die <button> scheint zu etablieren, die eine block-Formatierungs-Kontext statt einer flex eine.

    Benutzer (Daniel Holbert): , Das ist effektiv das, was der HTML-Spezifikation erfordert. Mehrere HTML-container-Elemente sind "Besondere" und effektiv ignorieren Ihre CSS - display Wert in Gecko [abgesehen davon, ob es inline-level vs. block-level]. <button> ist eine von diesen. <fieldset> & <legend> sind als gut.

    Hinzufügen von Unterstützung für display:flex/grid-layout und ColumnSet geben innerhalb von <button> - Elemente

    Benutzer (Daniel Holbert):

    <button> ist nicht umsetzbar (von Browsern) in reinem CSS, also Sie sind ein bisschen wie eine Blackbox, aus der Sicht von CSS. Dies bedeutet, dass
    Sie müssen nicht unbedingt in der gleichen Weise reagieren, dass z.B. ein <div>
    würde.

    Dies ist nicht spezifisch für flexbox -- z.B. haben wir nicht dargestellt werden Bildlaufleisten wenn Sie overflow:scroll auf eine Schaltfläche, und wir auch nicht machen, es als
    Tabelle wenn Sie display:table drauf.

    Treten noch weiter zurück, dies ist nicht spezifisch für <button>. Betrachten <fieldset> und <table> die haben auch spezielle rendering
    Verhalten.

    Und alte-timey HTML-Elemente wie <button> und <table> und <fieldset> einfach nicht unterstützen benutzerdefinierte display Werte, andere als
    für die Zwecke der Beantwortung der sehr high-level-Frage: "ist dieser
    Elements von block-level und inline-level", für fließenden andere Inhalte rund
    das element.

    Siehe auch:

    • Apple weiß am besten!
    • Ich bekomme, warum es funktioniert möglicherweise nicht für <button>s, aber warum auf der Erde ist es nicht die Arbeit für <fieldset> entweder? Sollte das nicht element als ein regulärer block-level-element ist gültig für ein flex-container?
    • Vereinbart. Die Regel wohl vor-besteht CSS3-Technologien, wie Flex-und Grid, und neu bewertet werden sollten.
    • So möchten wir verhindern, dass eine Schaltfläche missbraucht... könnte aber noch Missbrauch etwas anderes und legen Sie Sie in der Schaltfläche. Klingt ungefähr so logisch wie der rest der web...
    • Suche nach diesem thread im Jahr 2019 und der Feststellung, dass <button> gut funktioniert, wie eine flex-container in Chrom 76 und Safari 12.1. Aber beide sind fehlerhaft, wenn Sie die Taste ein Kind display:grid. Siehe codepen.io/urlyman/pen/rXqmqY. Firefox-68 hält.
    • Haben Sie eine Quellenangabe für <button> nicht entworfen, um eine flex - (oder raster -) container? Es sieht aus wie der Browser bezüglich der Unfähigkeit set display auf diese Elemente als einen Fehler und aktiv zu fixieren.
    • Sollten Sie erwägen, einen Verweis auf den eigentlichen text, wo man die Behauptung. Keine Notwendigkeit, um die Antwort zu meinem Kommentar - wenn Sie es hinzufügen, um den text, wo Sie die Behauptung, ich gebe dir ein upvote.
    • Auch, warum nicht ein div in einer Schaltfläche gültiges HTML?
    • Ein div kann nicht ein Kind von einem button weil, wenn Sie denken, dass es in old-school-HTML, ein block-level-element kann nicht ein Kind von einem inline-level-element. Aber heute, mit HTML5, die technisch richtige Antwort ist, dass ein button element kann nur akzeptieren, Phrasing Content. Ein span stellt Phrasing Content, aber eine div nicht. Ein div stellt Flow Content. details

    InformationsquelleAutor Michael_B
  2. 12

    Hier ist meine einfachste hack.

    button::before,
button::after {
    content: '';
    flex: 1 0 auto;
}
    • funktioniert nicht in firefox, obwohl
    InformationsquelleAutor Igari Takeharu
Schreibe einen Kommentar