आईई छद्म तत्व सीएसएस को पार कर रहा है?

Question

मैं आईई पर काम करने के लिए कुछ छद्म तत्व प्राप्त करने की कोशिश कर रहा हूं, लेकिन यह मुझे नहीं जाने देता है।

यह सीएसएस को पार करता है और ऐसा नहीं करता है, जो मुझे परेशान करता है।

क्या किसी को पता होगा कि मैं क्या गलत कर रहा हूं?

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

क्या होता है का स्क्रीनशॉट:

Answer 1

यह एक ज्ञात मुद्दा है, लेकिन शैलियों लागू किया जा रहा है, वास्तव में कर रहे हैं। डेवलपर टूल सोचते हैं कि छद्म-तत्व शैलियों को अभिभावक-तत्व संबंधित शैलियों द्वारा ओवरराइड किया जा रहा है। यह आसानी से अभिभावक तत्व की परिकलित शैली का निरीक्षण और प्रतिस्पर्धा शैलियों (क्या 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); 
    }); 

}()); 

मैं अगर हम पहले से ही इस बग पर नज़र रखने के लिए एक आंतरिक मुद्दा है, और यह करने के लिए इस सवाल का जोड़ने को देखने के लिए जांच करेंगे । आम तौर पर, हम इस तरह के मुद्दों को वास्तविक दुनिया में उत्पन्न होने वाली दुःख की मात्रा के अनुपात के समान आनुपातिक रूप से देने की कोशिश करते हैं। तो टिकट पर नए जोड़े के रूप में आपका प्रश्न रखने से हमें फिक्स आगे बढ़ने में मदद मिल सकती है :)

Answer 2

मेरे पास यह वही समस्या थी! आपको अपना :before और :after छद्म तत्व display संपत्ति देना होगा।

:before और :after पर निम्नलिखित जोड़ें।

display: block; 

यह आपकी समस्या को ठीक करना चाहिए। :)