显示 flex 不适用于 Chrome 中的摘要标签？

【问题标题】：display flex doesn't work on summary tags in Chrome?显示 flex 不适用于 Chrome 中的摘要标签？
【发布时间】：2015-08-19 10:56:50
【问题描述】：

我在 <summary> 标签上有一个 display: flex 和一些子 <p> 元素。应该排成一排吧？确实如此，但仅限于 Firefox。不在 Chrome (43.0.2357.81) 上。只有我吗？

http://jsfiddle.net/laggingreflex/5e83uqf9/

summary {
  display: flex;
  flex-flow: row wrap;
}
summary h3 {
  display: block;
  flex: 1 100%;
}

<summary>
  <h3>Heading</h3>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</summary>

【问题讨论】：

只评论让你知道不只是你，我也看到了。

标签： html css google-chrome flexbox

【解决方案1】：

summary 元素不是结构标签，它有自己的显示属性。它是 details 标记的切换可见性框。

根据MDN和CanIUse，Chrome已经完全实现了summary标签，而Firefox没有。对于未实现的标记类型，大多数主流浏览器的默认行为是将元素绘制为通用块级元素。那么，在 Firefox 中，使用summary 标记与使用div 标记基本相同。在铬;但是，它很可能会呈现为 replaced element，这意味着（除其他外）您无法覆盖其显示类型。

编辑：summary 标签现在也在 Firefox 中实现，从 49 版开始。

【讨论】：