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

这是一个已知问题,但实际上正在应用这些样式.开发人员工具认为伪元素样式被父元素对应的样式覆盖.通过检查父元素的Computed样式并查看(F12工具相信的)竞争样式,可以很容易地证明这一点:

然而,再次,这些样式实际上被应用于正确的元素 - 无论开发人员工具相信或建议什么.您可以通过遍历parent-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; 

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