html - 带有 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>

标签： htmlcsssafari

Answer 1

问题

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

解决方法

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