Question

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

＆＃13;

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

＆＃13;

<span></span>

＆＃13;

JSFiddle Demo

根据W3C specification：

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

（强调我的）

根据Microsoft's Developer Network (MSDN)：

从Microsoft Internet Explorer 5开始，如果子对象的父级隐藏，则该对象可以可见。

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

Answer 1

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

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

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

1 个答案: