Problem
W niektórych przeglądarkach <button>element nie akceptuje zmian displaywartości, poza przełączaniem między blocki inline-block. Oznacza to, że <button>element nie może być kontenerem flex ani grid, ani <table>też.
Oprócz <button>elementów, może znaleźć zastosowanie do tego ograniczenia <fieldset>i <legend>elementy, jak również.
Aby uzyskać więcej informacji, zobacz poniższe raporty o błędach.
Uwaga: Chociaż nie mogą to być pojemniki elastyczne, <button>elementy mogą być elementami elastycznymi.
Rozwiązanie
Istnieje proste i łatwe obejście tego problemu w różnych przeglądarkach:
Zawiń zawartość buttonw a spani utwórz spanpojemnik elastyczny.
Dostosowany HTML ( buttonzawartość opakowana w a span)
<div>
<button>
<span>
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
Dostosowany CSS (docelowy span)
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
Zmienione demo
Referencje / raporty o błędach
Flexbox na <button>blokuje zawartość, ale nie ustanawia kontekstu formatowania flex
Użytkownik (Oriol Brufau): elementy <button>podrzędne są zablokowane, zgodnie ze specyfikacją flexbox. Jednak <button>wydaje się, że ustanawia kontekst formatowania blokowego zamiast elastycznego.
Użytkownik (Daniel Holbert): Właśnie tego wymaga specyfikacja HTML. Kilka elementów kontenera HTML jest „specjalnych” i skutecznie ignoruje ich displaywartości CSS w Gecko [poza tym, czy jest to na poziomie liniowym czy na poziomie bloku]. <button>jest jednym z nich. <fieldset>i też <legend>są.
Dodaj obsługę wyświetlania: flex / grid i układ kolumn wewnątrz <button>elementów
Użytkownik (Daniel Holbert):
<button>nie są możliwe do zaimplementowania (przez przeglądarki) w czystym CSS, więc są trochę czarną skrzynką z punktu widzenia CSS. Oznacza to, że niekoniecznie reagują w taki sam sposób, jak np <div>
.
Nie jest to specyficzne dla flexboksa - np. Nie renderujemy pasków przewijania, jeśli umieścisz overflow:scrollprzycisk, i nie renderujemy go jako tabeli, jeśli go umieścisz display:table.
Cofając się jeszcze dalej, to nie jest specyficzne dla <button>. Rozważ <fieldset>i <table>które również mają specjalne zachowanie podczas renderowania.
I stary-timey elementy HTML, jak <button>i <table>, a <fieldset>po prostu nie obsługują niestandardowe displaywartości, inne niż dla celów odpowiedzi na pytanie bardzo wysokim poziomie „Jest to element blokowy lub inline-level”, na płynący inną zawartość wokół elementu .
Zobacz także: