在 Safari/Webkit 中设置 Details/Summary 标记的样式时出错

Question

使用 <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），flippy 三角形被推到一个新行：

My Cool List
▶

在 Safari 中：

那么，如何让 Safari 像 Firefox + Chrome 一样在同一行显示翻转三角形？这个问题好像是display: flex和::after伪元素结合使用造成的，但是我对前端开发了解不多所以无从解决。

Answer 1

事实证明，Safari 不处理 <summary> 中的 <p> 标签；当我删除这些标签时，我什至不需要使用 flex 来右对齐伪元素。

Answer 2

您可以添加特定于浏览器的 CSS 来克服 display: flex; for <summary> 问题。

对于CSS

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

    details > summary { 

        display: block; 

    }
}}

对于小号CSS

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

    details > summary { 

        display: block; 

    }
}}

在 Safari/Webkit 中设置 Details/Summary 标记的样式时出错

Error styling the Details/Summary marker in Safari/Webkit

css

webkit