疯狂的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元素替换为其他元素。