Question

如何让HTML5的details和summary标记适用于所有浏览器？我可以获取详细信息和摘要标记以使用谷歌浏览器，但我不能让它与任何其他浏览器一起使用。

Answer 1

这是一个老问题，但对详细信息和摘要标记的浏览器支持仍然有限。我发现有用的一篇博文是：http://blog.teamtreehouse.com/use-details-summary-elements。它使用jquery来实现向后兼容。

Answer 2

我使用它来使其在所有不支持的浏览器上都能正常工作：

if(this.parentElement.getAttribute('open')!='open') 
  this.parentElement.setAttribute('open','open'); 
else this.parentElement.removeAttribute ('open'); 
return false;

details summary {display: block;}
details summary::before {content: "▸ ";}
details[open="open"] summary::before {content: "▾ ";}
details summary ~ * {
    display: none;
}
details[open] summary ~ * {
    display: block;
}

<details>
  <summary onclick="if(this.parentElement.getAttribute('open')!='open') this.parentElement.setAttribute('open','open'); else this.parentElement.removeAttribute ('open'); return false;">{{ item.title }}</summary>
  {{ item.content }}
</details>

请注意，Firefox设置了一个空的“打开”属性。您想通过使用javascript将其设置为“打开”来规范化。

没有JS吗？没问题，您将拥有默认的行为。 JS只会尝试接管浏览器的实现并设置或删除属性。 CSS将接管显示和隐藏（基于'open'属性）。 CSS规则完美地模仿了正常行为，因此不会影响/更改或破坏它。因为详细信息/摘要实现现在完全由JS和CSS支持，所以它也可以在所有不支持的浏览器上使用。

详细信息和摘要标记兼容性问题

2 个答案: