Flexbox 不适用于摘要标签 [Safari 浏览器]答案

【问题标题】：Flexbox not working on summary tags [Safari browser]Flexbox 不适用于摘要标签 [Safari 浏览器]
【发布时间】：2021-01-15 10:52:26
【问题描述】：

在 Chrome、Firefox 和最新的 Safari 浏览器中，我可以在摘要标签上使用 flexbox'justify-content: space-between：

https://codepen.io/dash/pen/qBZGRJe

align-items: center;
display: flex;
justify-content: space-between;

<summary class=faq>
<h4>Heading</h4>
<svg viewBox="0 0 448 512" class=faq-icon><path fill="#000" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>
</summary>

旧的 Safari 浏览器似乎不允许 summary 标记的弹性框，并在标题下显示 V 形图标。

关于这个问题的解决方法有什么想法吗？

【问题讨论】：

标签： html css flexbox safari

【解决方案1】：

您可以在弹性项目上使用margin 属性和自动值来获取它之间的空间。

像这样：

.faq {
    align-items: center;
  background: #ccc;
    display: flex;
  width: 100%;
}

.faq-icon {
  height: 18px;
  margin-left: auto;
}

<summary class=faq>
  <h4>Heading</h4>
  <svg viewBox="0 0 448 512" class=faq-icon><path fill="#000" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>
</summary>

【讨论】：

像魅力一样工作。最适合我的代码情况。非常感谢！

【解决方案2】：

你可以试试position: absolute:

.faq {
  position: relative;
  background: #ccc;
  padding: 10px 0;
}

.faq-icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 18px;
}

<summary class=faq>
  <h4>Heading</h4>
  <svg viewBox="0 0 448 512" class=faq-icon><path fill="#000" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>
</summary>

【讨论】：

也很好！谢谢。