Internet Explorer 不会将非空 ::before 和 ::after 视为子元素

Question

我的 span 应用了 visibility: hidden;，并且它具有非空的 ::before 和 ::after 伪元素，它们不尊重 Internet Explorer（所有版本）中的 visibility: visible; 属性，因为它们应该是.是什么导致这种情况发生？

span {
    display: block;
    height: 8px;
    width: 50px;
    background: black;
    position: absolute;
    top: 24px;
    visibility: hidden;
}
span::before, span::after {
    content:"asdf";
    position: absolute;
    display: block;
    left: 0;
    width: 50px;
    height: 8px;
    background: black;
    visibility: visible;
}
span::before {
    top: -15px;
}
span::after {
    bottom: -15px;
}

<span></span>

JSFiddle Demo

根据W3C specification：

当它们的计算内容值不为 none 时，这些伪元素生成框 就好像它们是其原始元素的直接子元素，并且可以像文档树。它们从其原始元素继承任何可继承的属性；不可继承的属性像往常一样采用它们的初始值。

（强调我的）

根据Microsoft's Developer Network (MSDN)：

从 Microsoft Internet Explorer 5 开始，子对象可以在其父对象隐藏时可见。

这是 IE 未能将非空伪元素视为子元素的错误，还是我遗漏了什么？

Answer 1

这确实似乎是 IE 处理伪元素和 visibility 属性的错误。 Microsoft 能够复制它以响应 this issue。

值得注意的是，Microsoft Edge 似乎没有出现此错误。