IE越过伪元素CSS？
我一直在试图获得一些伪元素在IE上工作，但它只是不让我。
它跨越了CSS，就像它不在那里，这有点让我感到不安。
有谁知道我在做什么错了？ 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)); }
发生了什么的屏幕截图
这是一个已知的问题，但是风格实际上正在被应用。 开发人员工具认为伪元素样式被父元素相应的样式覆盖。 通过检查父元素的计算风格和查看（F12工具认为是什么）竞争式样，可以很容易地certificate这一点：
然而，这些风格再一次被应用于正确的元素 – 无论开发者工具是相信还是暗示。 您可以通过运行父元素和两个伪元素并logging其计算的高度来确认：
(function () { var el = document.querySelector( ".newbutton" ); [ "", "::before", "::after" ].forEach(function ( e ) { // Output: 74px, 80px, 80px console.log( window.getComputedStyle( el, e ).height ); }); }());
我会检查一下，看看我们是否已经有了一个跟踪这个bug的内部问题，然后把这个问题添加进去。 一般来说，我们试图给这样的问题注意的数量与现实世界中引起悲痛的程度成正比。 所以把你的问题作为票上的新增加可能会帮助我们向前移动修复:)
我有这个完全相同的问题！ :after伪元素:before和:after你必须给出一个display属性。
将以下内容添加到:before和:after 。
display: block;
这应该解决您的问题。 🙂
