Internet Explorer不处理非空:: before和:: after作为子元素 [英] Internet Explorer isn't treating non-empty ::before and ::after as children elements

问题描述

我的span有 visibility：hidden; 应用于它，它有非空的 :: before :: after 伪元素不尊重Internet Explorer（所有版本）中的 visibility：visible; 因为他们应该。导致这种情况发生的原因是什么？

  span {display：block; height：8px; width：50px;背景：黑色; position：absolute; top：24px; visibility：hidden;} span :: before，span :: after {content：asdf; position：absolute;显示：block; left：0; width：50px; height：8px;背景：黑色; visibility：visible;} span :: before {top：-15px;} span :: after {bottom：-15px;}  

 < span>< / span>  

JSFiddle演示

根据 W3C规范：

当这些伪元素的计算内容值不为none时，这些伪元素会生成框，如同它们是直接子元素并且可以像文档树中的任何正常的源自文档的元素一样被定型。它们从它们的始发元素继承任何可继承的属性;不可继承属性会照常使用其初始值。

（强调我）

根据 Microsoft的开发人员网络（MSDN）， ：

从Microsoft Internet Explorer 5开始，子对象可见隐藏。

这是一个错误，IE未能将非空伪元素视为子元素，我缺少一些东西？

解决方案

这似乎是一个错误，IE处理伪元素和 visibility 属性。 Microsoft能够重现它以响应这个问题。

值得注意的是Microsoft Edge似乎不会显示此错误。

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?

解决方案

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.

这篇关于Internet Explorer不处理非空:: before和:: after作为子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！