Ошибка оформления маркера Details/Summary в Safari/Webkit

При использовании тега <details> я хочу отобразить треугольник справа от элемента <summary>.

Итак, вместо стандартного:

▶ My Cool List (выровнено по левому краю)

Я хочу сделать это:

My Cool list ▶ (выравнивание по правому краю)

И вот это работает в Chrome:

хром правильный

Этот вопрос помог мне написать CSS, который работает в Chrome и Firefox:

// Right-align all summaries.
details > summary {
  list-style: none; // Remove the default arrow.
  display: flex;
  align-items: center; // Vertically center the arrow.
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::after {
  content:  '▶';
}
details[open] > summary::after {
  content: "▼";
}

Однако в Safari (протестирован Mojave на десктопе + iOS14 + iOS12) треугольный треугольник перемещается на новую строку:

My Cool List
▶

В Сафари:

сломанный треугольник сафари

Итак, как мне заставить Safari отображать перевернутый треугольник в той же строке, что и Firefox + Chrome? Кажется, эта проблема вызвана комбинацией использования display: flex с псевдоэлементом ::after, но я мало что знаю о фронтенд-разработке, поэтому затрудняюсь решить эту проблему.


css webkit
person Patrick Kenny    schedule 07.11.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Оказывается, Safari не обрабатывает теги <p> в тегах <summary>; когда я удалил эти теги, мне даже не нужно было использовать flex для выравнивания псевдоэлемента по правому краю.

person Patrick Kenny    schedule 13.11.2020

arrow_upward
1
arrow_downward

Вы можете добавить CSS для конкретного браузера, чтобы решить проблему display: flex; вместо <summary>.

Для CSS

@media not all and (min-resolution:.001dpcm) { @media {

    details > summary { 

        display: block; 

    }
}}

Для СКС

    @media not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) {

    details > summary { 

        display: block; 

    }
}}
person mithz07    schedule 11.05.2021