IE 中的 HTML 摘要标签

Posted 2023-02-22

【中文标题】IE 中的 HTML 摘要标签

【英文标题】：HTML Summary tag in IE

【发布时间】：2018-04-16 02:06:55

【问题描述】：

有什么方法可以在 Internet Explorer（版本 11）（例如外部库）中使用摘要标签。

    <details>
    <summary>This is a summary.</summary>
    <p>bla bla bla</p>
    </details>    

提前致谢。

【问题讨论】：

IE 不支持summary 标签。

【参考方案1】：

你必须让它们自己工作，因为 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，因此您必须对其进行调整。 （例如，您可能对所有非summary 内容使用div。）您可能还想在左侧添加一个箭头或其他东西，以便类似于Chrome 和Firefox 呈现这些内容的方式。

通常，您希望执行上述操作的代码在body 元素之前，以避免出现无样式内容。

然后通过切换样式定义的showing 类来响应对details 元素和空格/输入按键的点击：

// 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 之前，它可以在您的正常位置。但由于它在概念上是初始位的一部分，因此将其放在那里可能是有意义的。

然后确保在details 和summary 上都使用tabindex="0"，以便IE 将它们包含在Tab 顺序中：

<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>

【讨论】：

谢谢，这正是我要找的

完整的代码 sn-p 有一个错误（您似乎已经在上面的小代码 sn-ps 中修复了该错误）。它注入的 CSS 代码将设置 display: block;对于每个匹配“details.showing :not(summary)”的子节点，这会弄乱具有另一个显示值的元素。

@Spellcoder - 感谢您告诉我！就这样我确定我正在修复正确的事情，问题是后代组合器而不是子组合器？ （例如，我在这两条规则上缺少>？）还是还有更多？这是我看到的第一件事，但……

【参考方案2】：

如前所述，IE11 不支持摘要/详细信息。对于那些刚刚发现这一点的人，您可以尝试使用以下一些 polyfill 来支持 IE11：

https://github.com/javan/details-element-polyfill https://github.com/mathiasbynens/jquery-details