IE跨出伪元素CSS？ [英] IE crossing out pseudo element CSS?

问题描述

我一直在尝试在IE上使用一些伪元素，但它不允许我。

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

它跨越了CSS和行为喜欢它不在那里，这有点聚集我。

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

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

Would anyone know what I'm doing wrong? HTML:

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

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));
}

会发生什么的屏幕截图：

Screenshot of what happens:

推荐答案

这是一个已知问题，但样式实际上正在应用。开发人员工具认为伪元素样式正在被父元素对应的样式覆盖。通过检查父元素的计算样式并查看（F12工具相信是什么）竞争样式，可以很容易地证明这一点：

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屋！