display flex对Chrome中的摘要标记不起作用？

I have a display: flex on a <summary> tag with some child <p> elements. It should arrange them in a row, right? and it does, but only in Firefox. Not on Chrome (43.0.2357.81). Is it just me?

我有一个显示:在

标签上展示一些子

元素。它应该排成一排,对吗?它确实如此,但仅限于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>

1 个解决方案

#1

The summary element is not a structural tag, it has its own display properties. It is meant to be a toggled visibility box for the details tag.

summary元素不是结构标记,它有自己的显示属性。它旨在成为详细信息标记的切换可见性框。

According to both the MDN and CanIUse, Chrome has fully implemented the summary tag, while Firefox has not. For an un-implemented tag type, the default behavior of most major browsers is to draw the element as a generic block-level element. In Firefox, then, using the summary tag is essentially the same as using the div tag. In Chrome; however, it may very well be rendered as a replaced element, which would mean (among other things) that you cannot override its display type.

根据MDN和CanIUse,Chrome已经完全实现了摘要标记,而Firefox则没有。对于未实现的标记类型,大多数主要浏览器的默认行为是将该元素绘制为通用块级元素。在Firefox中,使用summary标签与使用div标签基本相同。在Chrome中;但是,它很可能被渲染为替换元素,这意味着(除其他外)你不能覆盖它的显示类型。

EDIT: The summary tag is now implemented in Firefox as well, as of version 49.

编辑:摘要标记现在也在Firefox中实现,从版本49开始。