为什么IE 11没有渲染：在元素之后，在开发工具中显示css被划掉？

Question

我有一个角度应用程序，在给定的屏幕中有两个字体图标。这些在chrome，firefox和edge中渲染得很好，但在IE 11上它们不显示。这些图标将呈现为:after伪类的.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 } ，根据我的研究，它应该可以在IE 9及更高版本上正常工作。但是，在IE上，这些都不会被渲染。

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

在显示问题的屏幕中编译并实际使用的相关CSS如下所示：

LoadHtml

划掉的规则之上的规则是无关的。但是，既然有人要求见到他们，那么他们就是：

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

Answer 1

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;