有没有办法在Internet Explorer（版本11）（例如外部库）中使用摘要标记。
<details>
<summary>This is a summary.</summary>
<p>bla bla bla</p>
</details>
提前致谢。
答案 0 :(得分：2)
你必须让它们自己工作，因为IE不支持它们。
您可以像这样功能检测details / summary：
if (typeof HTMLDetailsElement === "undefined") {
// No, not intrinsically supported
}
如果它们没有内在的支持，为了设置它们的样式，你需要告诉IE它们的存在，你可以通过简单地创建并丢弃它们来做到这一点：
document.createElement("details");
document.createElement("summary");
然后（再次，只有在没有内在支持的情况下）为它们添加一些样式：
// JUST A ROUGH SKETCH
var style = document.createElement("style");
style.textContent =
"details > :not(summary) {\n" +
" display: none;\n" +
"}\n" +
"details.showing > :not(summary) {\n" +
" display: block;\n" +
"}\n";
document.querySelector("head").appendChild(style);
当然，并非details中的所有元素通常都会display: block，因此您必须对其进行调整。 （例如，您可以对所有非div内容使用summary。）您可能还想在左侧添加箭头或其他类似于Chrome和Firefox渲染这些。
非典型，您希望执行上述操作的代码在 body元素之前，以避免出现无格式内容。
然后通过切换样式定义的details类来响应点击showing元素和空格/输入上面的按键：
// AGAIN: THIS IS A ROUGH SKETCH
document.addEventListener("click", detailsHandler);
document.addEventListener("keypress", detailsHandler);
function detailsHandler(e) {
if (e.type === "keypress" && [13, 32].indexOf(e.which || e.keyCode) === -1) {
return;
}
var el = e.target;
while (el && el.tagName !== "DETAILS") {
if (el.tagName === "BODY") {
el = null;
break;
}
el = el.parentNode;
}
if (el) {
el.classList.toggle("showing");
}
}
此代码不必在body之前，它可以位于您的正常位置。但由于它在概念上属于初始位，因此将它放在那里可能是有意义的。
然后确保您在tabindex="0"和details上使用summary，以便IE将其按顺序包含在其中：
<details tabindex="0">
<summary tabindex="0">This is a summary.</summary>
<p>bla bla bla</p>
</details>
实例：
<!-- In the head element -->
<script>
(function() {
if (typeof HTMLDetailsElement === "undefined") {
// Tell IE they exist
document.createElement("details");
document.createElement("summary");
document.addEventListener("click", detailsHandler);
document.addEventListener("keypress", detailsHandler);
var style = document.createElement("style");
style.textContent =
"details :not(summary) {\n" +
" display: none;\n" +
"}\n" +
"details.showing :not(summary) {\n" +
" display: block;\n" +
"}\n";
document.querySelector("head").appendChild(style);
}
function detailsHandler(e) {
if (e.type === "keypress" && [13, 32].indexOf(e.which || e.keyCode) === -1) {
return;
}
var el = e.target;
while (el && el.tagName !== "DETAILS") {
if (el.tagName === "BODY") {
el = null;
break;
}
el = el.parentNode;
}
if (el) {
el.classList.toggle("showing");
}
}
})();
</script>
<!-- End of in the head element -->
<!-- In body -->
<details tabindex="0">
<summary tabindex="0">This is a summary.</summary>
<p>bla bla bla</p>
</details>
答案 1 :(得分：-1)
如上所述，IE11不支持摘要/详细信息。对于那些刚刚发现此问题的人，可以尝试使用以下一些polyfill来支持IE11：