为什么IE 11没有渲染：在元素之后，在开发工具中显示css被划掉？ [英] Why is IE 11 not rendering :after element, showing css as crossed out in dev tools?

问题描述

我有一个角度应用程序，在给定的屏幕中有两个字体图标。这些在chrome，firefox和edge中渲染得很好，但在IE 11上它们不显示。图标将呈现为的内容：之后的伪类，根据我的研究应该可以正常工作在IE 9及以上。但是，在IE上，这些都不会呈现。

I have an angular app with two font icons in a given screen. These are rendered just fine in chrome, firefox and edge, but on IE 11 they do not display. The icons are to be rendered as the content of the :after pseudo class, which according to my research should work fine on IE 9 and up. However, on IE, these are simply not rendered.

正如您在屏幕截图中看到的那样：after元素不在开发工具中显示的DOM中，并且css是正确的，但显示在开发工具中划掉：

As you can see in the screenshot, the :after element is not in the DOM displayed in the dev tools, and the css is correct but shows crossed out in dev tools:

在屏幕上编译并实际使用的相关CSS显示问题是这样的：

The relevant CSS that is compiled and actually used in the screen showing the issue is like so:

.profile-picture[_ngcontent-vem-9]:after {
    font-family: Material Icons;
    content: "\E3B0";
    font-size: 48px;
    top: 32px;
    left: 25px
}
.profile-picture[_ngcontent-vem-9] .title[_ngcontent-vem-9],
.profile-picture[_ngcontent-vem-9]:after {
    display: block;
    position: absolute;
    color: #9e9e9e;
    transition-duration: .3s
}

划掉的规则一些是无关的。但是既然有人要求看到它们，那么它们就是：

The rules above the crossed out ones are unrelated. But since someone asked to see them, here they are:

问题是：为什么会发生这种情况，以及如何解决？

推荐答案

我有一个类似的问题，< a> 标签上的after元素未在IE11中呈现，但我可以看到它的CSS样式。 Freddie的回答这里为我解决了这个问题。将其添加到css display：block;

I had a similar issue, the after element on an <a> tag wasn't rendered in IE11, though I could see the CSS style for it. Freddie's answer here solved the issue for me. Add this to the css display: block;

这篇关于为什么IE 11没有渲染：在元素之后，在开发工具中显示css被划掉？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！