Я пытался стилизовать fieldset
элемент с помощью display: flex
и display: inline-flex
.
Тем не менее, это не сработало: flex
вел себя как block
и inline-flex
вел себя как inline-block
.
Это происходит как в Firefox, так и в Chrome, но странным образом это работает в IE.
Это ошибка? Я не мог найти, что fieldset
должно иметь какое-то особое поведение, ни в HTML5, ни в спецификациях CSS Flexible Box Layout .
fieldset, div {
display: flex;
border: 1px solid;
}
<fieldset>
<p>foo</p>
<p>bar</p>
</fieldset>
<div>
<p>foo</p>
<p>bar</p>
</div>
Ответы:
Согласно ошибке 984869 -
display: flex
не работает для элементов кнопки ,Следовательно, эта ошибка была помечена как «исправлена как недействительная».
Существует также ошибка 1047590 -
display: flex;
не работает, в<fieldset>
настоящее время "неподтвержденный".Хорошие новости : Firefox 46+ реализует Flexbox для
<fieldset>
. Смотрите ошибку 1230207 .источник
<button> is not implementable (by browsers) in pure CSS
- это просто неправильно. Браузер может свободно реализовывать то, что<button>
они хотят, они не «обязаны по контракту» отображать его с использованием системных библиотек виджетов или чего-либо еще, что ухудшает их способность стилизовать их с помощью CSS или другого пользовательского поведения. То же самое относится и к любому другому элементу.Я узнаю, что это может быть ошибка в Chrome и Firefox где
legend
иfieldset
будут заменены элементы .Сообщения об ошибках:
Ошибка Chrome (все еще открыт)
Ошибка Firefox (исправлено начиная с v46)
Возможный обходной путь:
Возможный обходной путь будет использовать
<div role="group">
в HTML и применять вdiv[role='group']
качестве селектора в CSS .ОБНОВИТЬ
В Chrome версия 83
button
может работать сdisplay: inline-grid/grid/inline-flex/flex
, вы можете увидеть демо ниже:источник
Пожалуйста, пометьте ошибку Chrome, чтобы увеличить приоритет ошибки
Это ошибка в Chrome. Пожалуйста, добавьте звездочку к этой проблеме, чтобы повысить ее приоритетность: https://bugs.chromium.org/p/chromium/issues/detail?id=375693
Тем временем я создал эти три примера Code Pen, чтобы показать, как обойти эту проблему. Они построены с использованием CSS Grid для примеров, но те же методы могут быть использованы для flexbox.
Использование aria-labelledby вместо легенды
Это более правильный способ решения проблемы. Недостатком является то, что вам приходится иметь дело с созданием уникальных идентификаторов, применяемых к каждому поддельному элементу легенды.
https://codepen.io/daniel-tonon/pen/vaaGzZ
Использование role = "group" и aria-labelledby вместо fieldset и legend
Если вам нужен flex-контейнер, чтобы иметь возможность растягиваться на высоту элемента-брата, а затем передавать его на дочерние элементы, вам нужно будет использовать
role="group"
вместо<fieldset>
https://codepen.io/daniel-tonon/pen/BayRjGz
Создание фальшивой дублирующей легенды для стилизации
Это гораздо более хакерский способ сделать это. Это все еще так же доступно, но вам не нужно иметь дело с идентификаторами при этом. Основным недостатком является то, что между элементом настоящей легенды и элементом поддельной легенды будет дублироваться контент.
https://codepen.io/daniel-tonon/pen/zLLqjY
Легенда ДОЛЖНА быть прямым потомком
Когда вы впервые пытаетесь исправить это самостоятельно, вы, вероятно, попытаетесь сделать это:
Вы обнаружите, что это работает, и тогда вы, вероятно, будете двигаться дальше, не задумываясь об этом.
Проблема в том, что размещение оболочки div между набором полей и легендой нарушает отношения между этими двумя элементами. Это нарушает семантику набора полей / легенды.
Таким образом, тем самым вы победили всю цель использования fieldset / legend.
Кроме того, нет смысла использовать набор полей, если вы не зададите этому набору легенду.
источник
По своему опыту я обнаружил, что ни
<fieldset>
, ни<button>
, ни не<textarea>
можем должным образом использоватьdisplay:flex
или наследовать свойства.Как уже упоминали другие, сообщалось об ошибках. Если вы хотите использовать flexbox для управления упорядочением (например
order:2
), вам нужно заключить элемент в элемент div. Если вы хотите, чтобы flexbox управлял фактической компоновкой и размерами, то вы можете рассмотреть возможность использования div вместо элемента управления вводом (который, я знаю, воняет).источник
Возможно, нужно использовать группу ролей, потому что Firefox, Chrome и я думаю, что Safari, по-видимому, имеет ошибку с fieldsets. Тогда селектор в CSS будет просто
Изменить: Вот некоторые проблемы, с которыми сталкиваются и другие люди.
Выпуск 375693
Выпуск 262679
источник
Вы можете добавить дополнительный div
<fieldset>
с помощью следующих реквизитов:источник
<legend>
элемент (если он используется) в верхнем уровне<fieldset>
элемента , чтобы его использование по назначению (Permitted content: An optional <legend> element, followed by flow content.
- см developer.mozilla.org/en-US/docs/Web/HTML/Element/... )fieldset
.<legend>
элемента. Это побеждает цель использования fieldset / legend в первую очередь. Смотрите мой ответ здесь: stackoverflow.com/a/59425373/1611058Чтобы ответить на первоначальный вопрос: да, это ошибка, но она не была четко определена во время вопроса.
Теперь рендеринг для fieldset лучше определен: https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements
В Firefox и Safari,
flexbox
вfieldset
настоящее время работает. Это еще не в Chromium. (См. Https://bugs.chromium.org/p/chromium/issues/detail?id=375693 ).Также см. Https://blog.whatwg.org/the-state-of-fieldset-interoperability для улучшений, сделанных в спецификации в 2018 году.
источник