10

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

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

IE 11 为 :after 元素显示 css，没有渲染

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

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

以上划掉的规则是不相关的。但既然有人要求见他们，他们就在这里：

在此处输入图像描述

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

4

1 回答 1

8

我有一个类似的问题，<a>标签上的 after 元素没有在 IE11 中呈现，尽管我可以看到它的 CSS 样式。弗雷迪在这里的回答为我解决了这个问题。将此添加到 cssdisplay: block;

于 2017-06-15T10:23:40.900 回答