IE越过伪元素CSS？

我一直在试图获得几个伪元素在IE上工作，但它只是不让我。IE越过伪元素CSS？

它跨越了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>

截图：

来源

2015-01-10 Kairowa

有趣的是，它不会超出'-webkit -'位。 – BoltClock

Pfff，告诉我一下。我敢打赌，这是在故意拖延我。愚蠢的IE浏览器。 – Kairowa

无论如何，你在测试什么版本的IE，它告诉你关于文档模式/浏览器模式的内容？我从来没有真正明白为什么IE选择这种方式，但希望这些事情会提供一些线索。 – BoltClock

这是一个已知的问题，但款式其实都是被应用。开发人员工具认为伪元素样式被父元素相应样式覆盖。这是很容易通过检查已计算风格父元素，并在寻找（什么F12工具，相信定）竞争方式证明：

enter image description here

然而，同样，这些风格实际上是应用于正确的元素 - 无论开发人员工具是相信还是暗示。 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); 
    }); 

}());

我会检查，看看是否我们已经有一个内部问题跟踪这个错误，而这个问题又添加到它。一般来说，我们试图给这样的问题注意的数量与问题在现实世界中造成的悲伤的数量成正比。因此，将您的问题作为票上的新增内容，可能会帮助我们将修复向前移动:)

来源

2015-01-10 18:46:14 Sampson

我在IE11中看到了同样的问题，但是没有应用伪元素样式。即使关闭计算面板中假定的父母覆盖，也不会应用伪元素样式。整个块的唯一部分是内容规则，其他所有内容都被忽略。 – gps03

进入计算机我能够点击一个属性，并发现它被覆盖。我覆盖了背景，并且插入图标未显示用于排序（Datatables）。谢谢！ – Exzile

我的代码中的所有':: after'伪类型在IE11和Edge中划掉。所有的规则的确应用了:-)除了一个外：'cursor：pointer'。这是一个移动汉堡包菜单，所以我可以让指针走（因为我不期望在这个屏幕大小悬停）。 –

我有这个完全相同的问题！您必须给予您的:before和:after伪元素display属性。

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

display: block;

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

来源

2016-06-22 09:37:38 Freddie

不适用于我:( – Hazlo8

分享你目前设置的属性，我猜你可能没有设置内容属性，或者你试图设置一个不允许伪元素的伪元素 – Freddie

这固定对于我来说，这些属性仍然在Dev Tools中被删除，但是元素现在可以正常显示了。 –

IE越过伪元素CSS？

回答

相关问题