Сводка с flexbox и псевдоэлементом не отображается в Safari
В Safari 14 мой пример ниже выглядит так:
Но если вы используете Chrome 87, например, это выглядит так:
Я не нашел, это известная проблема? Если это так, есть ли какие-либо предлагаемые обходные пути?
summary::-webkit-details-marker {
display: none
}
details {
width: 300px;
}
summary {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
outline: solid 4px #000;
align-items: baseline;
}
summary::after {
content: "🌏";
}<details>
<summary>Hello</summary>
</details>Извините, я уже пробовал это. Обновлен фрагмент с префиксами webkit.
попробуй -webkit-box-orient: horizontal; за summary
Извините, это не имеет никакого эффекта.
удалось решить проблему?
Нет, пока нет, к сожалению
попробуйте «поиграть» с гибкими правилами в инспекторе объектов сафари в режиме реального времени. Например, для псевдокласса :after укажите встроенный гибкий дисплей с префиксом или il flex: 1 1 auto и т. д.
Я узнал ответ и обновил вопрос с ответом и обходным путем.
Ответы 1
Проблема
Некоторые элементы HTML, такие как <summary>, <fieldset> и <button>, не работают как flex-контейнеры. Отображение браузером по умолчанию пользовательского интерфейса этого элемента конфликтует с объявлением display: flex.
Обходной путь
Простое решение этой проблемы — использовать элемент-оболочку, который может быть flex-контейнером (например, <span>) непосредственно внутри элемента, который не может.
попробуйте добавить префикс -webkit- для гибких правил.