IE छद्म तत्व CSS को पार करना?

Question 1

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

यह 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>

स्निपेट का विस्तार करें

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

Question 2

यह एक ज्ञात मुद्दा है, लेकिन शैलियों को वास्तव में लागू किया जा रहा है। डेवलपर टूल को लगता है कि छद्म-तत्व शैलियों को मूल-तत्त्व शैलियों द्वारा ओवरराइड किया जा रहा है। यह आसानी से मूल-तत्व की कम्प्यूटेड शैली का निरीक्षण करके और F12 उपकरण (जो मानते हैं कि एफसीसी उपकरण मानते हैं) का प्रदर्शन करके किया जाता है :

यहाँ छवि विवरण दर्ज करें

फिर, हालांकि, ये शैलियाँ वास्तव में सही तत्वों पर लागू की जा रही हैं - भले ही डेवलपर उपकरण विश्वास या सुझाव दें। आप इसकी पुष्टि अभिभावक-तत्व और दो छद्म तत्वों के ऊपर चलकर और उनकी गणना की गई ऊँचाई से कर सकते हैं:

(function () {

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

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

}());

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

Question 3

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

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

display: block;

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

Question 4

ऊपर दिए गए उत्तर पर जोड़ने के लिए। मैंने प्रदर्शन की कोशिश की: ब्लॉक लेकिन मेरा मुद्दा यह था कि पृष्ठभूमि की छवि खराब हो रही थी। इसके बजाय मैं नीचे इस्तेमाल किया:

display: inline-block;

यह मेरे भीतर विकृत छवियों के साथ मेरे मुद्दे को तय करता है: पहले: के बाद

Question 5

जैसा कि मैं सामग्री फ़ॉन्ट और IE11 के साथ एक ही समस्या थी और उपरोक्त समाधान के साथ इसे हल नहीं कर सका, मैंने आगे देखा:

सामग्री डिज़ाइन आइकन के प्रलेखन का उपयोग करने का उल्लेख है

<i class="material-icons">&#xE87C;</i>

ब्राउज़रों के लिए लिगिंग्स का समर्थन नहीं करना। प्रत्येक आइटम के कोडपॉइंट यहां सूचीबद्ध हैं: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

इसके साथ समस्या: तत्वों के बाद है कि content-Tag में HTML को सादे पाठ के रूप में प्रस्तुत किया गया है जो & # x .. दिखा रहा है, इसलिए आपको निम्न के रूप में \ एस्केप का उपयोग करना होगा:

content:  "\e5c5";

Question 6

मैं यह एक ही मुद्दा था! आपको अपने छद्म तत्व के माता-पिता को एक overflow : visibleसंपत्ति देनी होगी ।

Question 7

इस लिंक को देखें " http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ", इस लिंक से उद्धृत

: इससे पहले और: किसी भी तत्व पर इंटरनेट एक्सप्लोरर 7 और उससे कम में समर्थित नहीं हैं।

यह बदले हुए तत्वों जैसे फॉर्म एलिमेंट्स (इनपुट्स) और इमेज एलिमेंट्स पर इस्तेमाल करने के लिए भी नहीं है।

दूसरे शब्दों में यह शुद्ध CSS के साथ असंभव है।

/ * * ट्रिक यहाँ है: * यह चयनकर्ता कहता है "इनपुट टेक्स्ट (+) के बाद पहला डोम एलिमेंट लें और उसके कंटेंट से पहले सेट करें * वैल्यू (: इससे पहले)। * /

input#myTextField + *:before {
       content: "👍";
    }