IE11无法正确渲染CSS

Question

Chrome和Opera正常渲染我的页面，但IE11和Edge没有问题。

我使用纯CSS来扩展/折叠3个部分标题。据我所知，IE 11对CSS3 / webkit有更多的支持，我绝对认为Edge会加强它的游戏。

https://jsfiddle.net/x0c5fsqh/

CSS代码段

summary::-webkit-details-marker {
    background: url(/images/toggle-expand.png) center no-repeat;
    color: transparent;
    font-size: 125%;
    margin-right: 2px;
}
details[open] summary::-webkit-details-marker {
    background: url(/images/toggle.png) center no-repeat;
    color: transparent;
}
summary:focus {
    outline-style: none;
}
article > details > summary {
    font-size: 28px;
    margin-top: 16px;
}
details > p {
    margin-left: 24px;
}
details details {
    margin-left: 36px;
}
details details summary {
    font-size: 16px;
}

正确呈现

IE / Edge如何渲染

所有标题都与应隐藏的前一部分的内容重叠，并且切换图像根本不显示。看起来上面的CSS完全被忽略了。

有什么想法吗？

Answer 1

据我所知，IE和Edge不支持<details>和<summary>元素。它与支持CSS3功能无关。看起来这些元素是HTML5.1规范的一部分。

参考：MDN，WebPlatform，caniuse.com。

查看caniuse.com上的资源标签。有一些链接指向一些polyfills。

正如其他人所说，以-webkit-为前缀的CSS属性在IE / Edge中不起作用。就像-o-或-ms-在Chrome中不起作用一样。