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

问题

My span has visibility: hidden; applied to it, and it has non-empty ::before and ::after pseudo-elements that aren't respecting the visibility: visible; property in Internet Explorer (all versions) as they should be. What's causing this to happen?

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

According to the 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.

(emphasis mine)

According to Microsoft's Developer Network (MSDN):

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

So is this a bug where IE is failing to treat non-empty pseudo-elements as children, or am I missing something?

回答1:

This does indeed appear to be a bug with IE's handling of pseudo-elements and the visibility property. Microsoft was able to reproduce it in response to this issue.

It's worth noting that Microsoft Edge does not appear to exhibit this bug.

来源：https://stackoverflow.com/questions/33725540/internet-explorer-isnt-treating-non-empty-before-and-after-as-children-elem