Flexbox 和伪元素的摘要无法在 Safari 中显示内联

Question

在 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>

Answer 1

问题

某些 HTML 元素（例如<summary>、<fieldset>和<button>）不能用作 Flex 容器。浏览器对这些元素 UI 的默认呈现与 display: flex 声明冲突。

解决方法

解决这个问题的简单方法是使用一个包装元素，它可以是一个弹性容器（如 ），<span>直接位于不能的元素内部。