IE 删除伪元素 CSS? [英] IE crossing out pseudo element CSS?

问题描述

我一直试图让一些伪元素在 IE 上工作，但它不让我使用.

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

有谁知道我做错了什么?

.newbutton {边界半径:50%；宽度:74px；高度:74px；位置:相对；背景颜色:黑色；边距:60px 0px 25px 17px；溢出:可见；}.newbutton:before {内容:f"；宽度:80px；高度:80px；位置:绝对；边界半径:50%；z-索引:-1；顶部:37px；左:37px；-webkit-transform: 翻译(-50%, -50%);变换:翻译(-50%，-50%)；-webkit-animation-name:淡入淡出；-webkit-animation-duration: 5s;-webkit-animation-iteration-count:无限；动画名称:淡入淡出；动画持续时间:5s；动画迭代次数:无限；}.newbutton:在{之后内容: "";宽度:80px；高度:80px；位置:绝对；边界半径:50%；z-索引:-2；顶部:-3px；左:-3px；背景:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));}

<div class="newbutton headerbutton"><span class="iconhead icon-02-arrow-icon"></span>
<p>开始游览</p>

发生情况的屏幕截图:

解决方案

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

然而，这些样式实际上被应用于正确的元素 - 无论开发人员工具相信或建议什么.您可以通过遍历父元素和两个伪元素并记录它们的计算高度来确认这一点:

(function () {var el = document.querySelector( ".newbutton" );[ "", "::before", "::after" ].forEach(function ( e ) {//输出:74px, 80px, 80pxconsole.log( window.getComputedStyle( el, e ).height );});}());

我会检查我们是否已经有跟踪此错误的内部问题，并将此问题添加到其中.一般而言，我们试图给予此类问题的关注量与该问题在现实世界中引起的悲伤程度成正比.因此，将您的问题作为新添加的问题可能会帮助我们向前推进修复 :)

I've been trying to get a few pseudo elements to work on IE, but it just doesn't let me.

It crosses out the CSS and acts like it's not there, which kinda aggrevates me.

Would anyone know what I'm doing wrong?

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

Screenshot of what happens:

解决方案

This is a known issue, but the styles are in fact being applied. The developer tools thinks the pseudo-element styles are being overridden by the parent-elements corresponding styles. This is easily demonstrated by inspecting the Computed style of the parent-element and looking at (what the F12 tools believe to be) competing styles:

Again, however, these styles are in fact being applied to the correct elements - regardless what the developer tools believe or suggest. You can confirm this by running over the parent-element and the two pseudo-elements and logging their computed height:

(function () {

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

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

}());

I'll check to see if we already have an internal issue tracking this bug, and add this question to it. Generally speaking, we try to give issues like this the amount of attention proportional to the amount of grief the issue is causing in the real world. So having your question as a new addition on the ticket may help us move a fix forward :)

这篇关于IE 删除伪元素 CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！