css - 疯狂的 Chrome 问题......Chrome 呈现曲折？

Question

可能是我太蠢而忽略了一些东西，但我遇到了一个只发生在 Chrome(12.0.7，但也可能是其他版本)中的奇怪问题。查看此站点:

http://www.jungledragon.com

在右侧，您会注意到一个社区更新面板。这是它在除 Chrome 之外的任何主要浏览器中的外观:

这是它在 Chrome 中的呈现方式:

它渲染曲折？当您单击其中一个时，它会展开该行。再次单击可折叠该行。在我的代码中没有任何地方有任何标记来实现这种行为。这是某种特殊行为，因为我正在使用图形标签吗？我之前在 Chrome 中测试过这个网站，当时没问题，所以这可能是最近的一个错误。

Answer 1

details 元素应该展示您在 Chrome 中遇到的行为。

The spec :

The details element represents a disclosure widget from which the user can obtain additional information or controls.

..

The open content attribute is a boolean attribute. If present, it indicates that the details are to be shown to the user. If the attribute is absent, the details are not to be shown.

When the element is created, if the attribute is absent, the details should be hidden; if the attribute is absent, the details should be shown. Subsequently, if the attribute is removed, then the details should be hidden; if the attribute is added, the details should be shown.

The user agent should allow the user to request that the details be shown or hidden. To honor a request for the details to be shown, the user agent must set the open attribute on the element to the value open. To honor a request for the details to be hidden, the user agent must remove the open attribute from the element.

某些版本的 Chrome 12(开发 channel )添加了对打开和关闭 details 元素的适当支持。

根据 http://caniuse.com/#search=details , Chrome 是目前唯一支持此功能的浏览器。

要解决此问题，我认为您应该将 details 元素替换为其他元素。