Css 在Safari/Webkit中设置详细信息/摘要标记样式时出错

使用

标记时，我希望在

元素的右侧显示翻转三角形

因此，不是默认值：

▶ 我的酷列表

（左对齐）

我想这样做：

我的酷列表▶（右对齐）

在这里，它在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上（在桌面+iOS14+iOS12上测试Mojave），flippy三角形被推到了一条新线：

My Cool List
▶ 

在狩猎中：


那么，如何让Safari像Firefox+Chrome一样在同一条线上显示flippy三角形呢？这个问题似乎是由使用
display:flex
和
：：after
伪元素组合而成的，但我对前端开发了解不多，所以我无法解决这个问题。
结果是Safari没有处理
中的
标记；当我删除这些标记时，我甚至不需要使用flex来右对齐伪元素。
结果是Safari不处理
中的
标记；当我删除这些标记时，我甚至不需要使用flex来右对齐伪元素。
您可以添加特定于浏览器的CSS来克服显示：flex用于
问题

用于CSS

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

    details > summary { 

        display: block; 

    }
}}

对于SCS

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

    details > summary { 

        display: block; 

    }
}}

您可以添加特定于浏览器的CSS来克服
display:flex用于
问题

用于CSS

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

    details > summary { 

        display: block; 

    }
}}

对于SCS

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

    details > summary { 

        display: block; 

    }
}}