Проблема
У деяких браузерах <button>елемент не приймає змін у своєму displayзначенні, окрім перемикання між blockта inline-block. Це означає, що <button>елементом не може бути гнучкий контейнер або контейнер сітки, а також a <table>.
На додаток до <button>елементів, ви можете виявити, що це обмеження стосується <fieldset>і <legend>елементів.
Докладніше див. У звітах про помилки нижче.
Примітка: Хоча вони не можуть бути гнучкими контейнерами, <button>елементи можуть бути гнучкими предметами.
Рішення
Існує простий і легкий спосіб вирішення цієї проблеми у різних браузерах:
Оберніть вміст buttonв spanта зробіть spanгнучкий контейнер.
Відрегульований HTML (загорнутий buttonвміст у a span)
<div>
<button>
<span>
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
Налагоджений CSS (цільовий span)
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
Переглянуте демо
Посилання / Звіти про помилки
Flexbox на <button>блоці зміщує вміст, але не встановлює контексту гнучкого форматування
Користувач (Оріоль Бруфау): Діти <button>блокуються, як диктує специфікація flexbox. Однак, <button>схоже, встановлює контекст форматування блоків замість гнучкого.
Користувач (Даніель Холберт): Це саме те, що вимагає специфікація HTML. Кілька елементів-контейнерів HTML є "спеціальними" і фактично ігнорують їх displayзначення CSS у Gecko [окрім того, чи є це вбудований рівень проти рівня блоку]. <button>є одним із таких. <fieldset>& <legend>є також.
Додайте підтримку для відображення: макет flex / grid та набір стовпців всередині <button>елементів
Користувач (Даніель Холберт):
<button>неможливо реалізувати (браузерами) у чистому CSS, тому вони є трохи чорною скринькою, з точки зору CSS. Це означає, що вони не обов'язково реагують так само, як, наприклад, а <div>
.
Це не характерно для flexbox - наприклад, ми не відображаємо смуги прокрутки, якщо ви overflow:scrollнатискаєте кнопку, і не відображаємо її як таблицю, якщо ви display:tableна неї кладете .
Відступаючи ще далі, це не характерно для <button>. Розглянемо <fieldset>і <table>які також мають особливу поведінку при отриманні.
І старі Тимей HTML елементи , як <button>і <table>і <fieldset>просто не підтримує призначені для користувача displayзначення, крім як для цілей відповіді на питання дуже високого рівня «цей елемент рівня блоку або інлайн-рівня», для протікає іншого контенту навколо елемента .
Також див.