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

Question

可能我很愚蠢并且忽略了某些东西，但我遇到了一个仅在 Chrome（12.0.7，但也可能是其他版本）中出现的奇怪问题。看看这个网站：

http://www.jungledragon.com

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

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

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

Answer 1

details 元素应该表现出您在 Chrome 中遇到的行为。

The spec:

details 元素代表一个 用户从中获取的披露小部件 可以获得更多信息或 控制。

..

开放内容属性是 布尔属性。如果存在，它 表示细节是 显示给用户。如果属性是 缺席，细节不详 显示。

当元素被创建时，如果 属性不存在，详情 应该隐藏；如果属性是 缺席时，应显示详细信息。 随后，如果属性是 删除，那么细节应该是 隐;如果添加了属性，则 应显示详细信息。

用户代理应该允许用户 要求显示详细信息 或隐藏。 兑现请求 要显示的详细信息，用户代理 必须设置 open 属性 元素的值打开。为了纪念一个 要求隐藏细节， 用户代理必须删除打开的 元素的属性。

某些版本的 Chrome 12（开发通道）添加了对打开和关闭 details 元素的适当支持。

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

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