我一直在try 让一些伪元素在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>

发生的情况的屏幕截图:

推荐答案

这是一个已知的问题,但这些样式实际上正在apply.开发人员工具认为伪元素样式正在被父元素对应的样式覆盖.这很容易通过判断父元素的Computed样式并查看(F12工具认为是)相互竞争的样式来演示:

在此处输入图像描述

然而,无论开发人员工具相信或建议什么,这些样式实际上都应用于正确的元素.You can confirm this通过遍历父元素和两个伪元素并记录它们的计算高度:

(function () {

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

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

}());

我将判断是否已经有跟踪此bug的内部问题,并将此问题添加到其中.一般说来,我们试图给这类问题以与该问题在现实世界中造成的悲痛程度成正比的关注度.因此,将您的问题作为新问题添加到门票上可能会帮助我们向前推进修复:)

Css相关问答推荐

在菜单中最后一项之后排除MUI分隔符

R SHINY:FILL CONTAINER=TRUE时调整DT数据表高度,

防止表格水平拉伸整个Blazor页面

在AND设计令牌上使用不同的主题

如何在点击时停止动画并将其返回到第一帧?

可以在 JavaFX CSS 中同时使用 dropshadow 和 insideshadow 吗?

如何使shiny 的showNotification可滚动?

Bootstrap 5 - 更改列顺序时出现问题

在 SVG 元素上方添加标签而不移动 SVG 元素

Bootstrap 类似乎没有任何作用

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

老虎机插槽上的 CSS 对齐问题

弹簧靴.一个文件捕获 CSS 其他没有

css3比例周围的空白

将未知大小的大图像居中在一个较小的 div 中,并隐藏溢出

CSS图像最大宽度设置为原始图像大小?

完成后如何防止css3动画重置?

使用 CSS 垂直居中旋转文本

背景图像可以大于 div 本身吗?

从 textarea 中删除所有样式(边框、发光)