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

Question

我的 span 应用了 visibility: hidden;，它有非空的 ::before 和 ::after 伪元素，它们不符合 visibility: visible; 属性在 Internet Explorer（所有版本）中应该是这样。是什么导致了这种情况？

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：

When their computed content value is not none, these pseudo-elements generate boxes as if they were immediate children of their originating element, and can be styled exactly like any normal document-sourced element in the document tree. They inherit any inheritable properties from their originating element; non-inheritable properties take their initial values as usual.

（强调我的）

根据Microsoft's Developer Network (MSDN)：

As of Microsoft Internet Explorer 5, a child object can be visible when its parent is hidden.

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

Answer 1

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

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

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

Internet Explorer isn't treating non-empty ::before and ::after as children elements

css

internet-explorer

css-selectors

pseudo-element