IE 划掉伪元素CSS？

Question

我一直在尝试让一些伪元素在 IE 上工作，但它就是不让我这样做。

它划掉了 CSS 并且表现得好像它不存在，这让我有点生气。

有人知道我做错了什么吗？

.newbutton {
  border-radius: 50%;
  width: 74px;
  height: 74px;
  position: relative;
  background-color: black;
  margin: 60px 0px 25px 17px;
  overflow: visible;
}

.newbutton:before {
  content: "f";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  top: 37px;
  left: 37px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: fadecolor;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-name: fadecolor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.newbutton:after {
  content: "";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -2;
  top: -3px;
  left: -3px;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
}

<div class="starttour">
  <div class="newbutton headerbutton">
    <span class="iconhead icon-02-arrow-icon"></span>
  </div>
  <p>START TOUR</p>
</div>

所发生情况的屏幕截图：

Answer 1

这是一个已知问题，但实际上正在应用样式。开发人员工具认为 pseudo-element 样式被 parent-elements 对应样式覆盖。通过检查 parent-element 的 Computed 样式并查看（F12 工具认为的）竞争样式可以很容易地证明这一点：

然而，这些样式实际上被应用于正确的元素 - 无论开发人员工具相信或建议什么。 You can confirm this 运行在 parent-element 和两个 pseudo-element 上并记录它们的计算高度：

(function () {

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) {
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    });

}());

我会检查一下我们是否已经有一个内部问题来跟踪这个错误，并将这个问题添加到其中。一般来说，我们会尽量给予此类问题以与其在现实世界中造成的悲伤程度成正比的关注度。因此，将您的问题作为工单上的新增内容可能有助于我们向前推进修复 :)

Answer 2

我遇到了完全相同的问题！你必须给你的 :before 和 :after 伪元素一个 display 属性。

将以下内容添加到 :before 和 :after。

display: block;

这应该可以解决您的问题。 :)

Answer 3

添加到上面的答案中。我试过 display: block 但我的问题是背景图像变形了。相反，我在下面使用：

display: inline-block;

这解决了我的 :before :after

中图像变形的问题

Answer 4

因为我在Material字体和IE11上遇到了同样的问题，用上面的方法都无法解决，所以进一步查看：

material 设计图标的文档提到使用

<i class="material-icons">&#xE87C;</i>

适用于不支持连字的浏览器。此处列出了每个项目的代码点：https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

:after 元素的问题是 content-Tag 中的 HTML 呈现为显示 &#x.. 的纯文本，因此您必须使用 \ 转义符，如下所示：

content:  "\e5c5";

Answer 5

查看此 link“”，引用自此 link

:after and :before are not supported in Internet Explorer 7 and under, on any elements.

It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.

In other words it's impossible with pure CSS.

/* * 诀窍在这里： * 这个选择器说“在后面取第一个 dom 元素 * 输入文本 (+) 并将其之前的内容设置为 * 值（：之前）。 */

input#myTextField + *:before {
       content: "";
    }

Answer 6

我遇到了完全相同的问题！你必须给你的伪元素的父元素一个 overflow : visible 属性.

IE 划掉伪元素CSS？

IE crossing out pseudo element CSS?

css

internet-explorer

ie-developer-tools