IE Pseudoelement CSS streichen?

Ich habe versucht, ein paar Pseudoelemente für den IE zum Laufen zu bringen, aber das lässt mich einfach nicht.

Es streicht das CSS durch und verhält sich so, als wäre es nicht da, was mich irgendwie ärgert.

Würde jemand wissen, was ich falsch mache?

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

Screenshot von dem, was passiert:

Dies ist ein bekanntes Problem, aber die Stile werden tatsächlich angewendet. Die Entwicklertools glauben, dass die Pseudoelementstile von den entsprechenden Stilen der übergeordneten Elemente überschrieben werden. Dies lässt sich leicht demonstrieren, indem Sie den berechneten Stil des übergeordneten Elements untersuchen und sich die konkurrierenden Stile ansehen (was die F12-Tools für möglich halten):

Wiederum werden diese Stile jedoch tatsächlich auf die richtigen Elemente angewendet - unabhängig davon, was die Entwicklertools glauben oder vorschlagen. Sie können dies bestätigen, indem Sie das übergeordnete Element und die beiden Pseudoelemente durchlaufen und ihre berechnete Höhe protokollieren:

(function () {

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

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

}());

Ich werde prüfen, ob wir bereits ein internes Problem haben, das diesen Fehler verfolgt, und diese Frage hinzufügen. Im Allgemeinen versuchen wir, Problemen wie diesen die Aufmerksamkeit zu schenken, die proportional zu der Menge an Trauer ist, die das Problem in der realen Welt verursacht. Wenn wir also Ihre Frage als Neuzugang auf dem Ticket haben, können wir einen Fix vorwärts bringen :)

Ich hatte genau das gleiche Problem! Sie müssen Ihren :beforeund :afterPseudo-Elementen eine displayEigenschaft geben.

Fügen Sie die folgende auf die :beforeund :after.

display: block; 

Dies sollte Ihr Problem beheben. :) :)

Zur obigen Antwort hinzufügen. Ich habe display: block versucht, aber mein Problem war, dass das Hintergrundbild verzerrt herauskam. Stattdessen habe ich unten verwendet:

display: inline-block;

Dies hat mein Problem mit verzerrten Bildern in meinem: vorher: nachher behoben

Da ich das gleiche Problem mit Material Font und IE11 hatte und es mit den oben genannten Lösungen nicht lösen konnte, habe ich weiter gesucht:

In der Dokumentation der Materialdesign-Symbole wird die Verwendung erwähnt

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

für Browser, die keine Ligaturen unterstützen. Die Codepunkte für jedes Element sind hier aufgelistet: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

Das Problem mit: after-Elementen besteht darin, dass HTML im content-Tag als einfacher Text gerendert wird, der das & # x zeigt. Sie müssen also das \ Escape wie folgt verwenden:

content:  "\e5c5";

Ich hatte genau das gleiche Problem! Sie müssen dem übergeordneten Element Ihres Pseudoelements eine overflow : visibleEigenschaft geben.

Überprüfen Sie diesen Link " http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ", wie aus diesem Link zitiert

: after und: before werden in Internet Explorer 7 und darunter für keine Elemente unterstützt.

Es ist auch nicht für ersetzte Elemente wie Formularelemente (Eingaben) und Bildelemente vorgesehen.

Mit anderen Worten, mit reinem CSS ist das unmöglich.

/ * * Der Trick ist hier: * Dieser Selektor sagt "Nimm das erste dom-Element nach * dem Eingabetext (+) und setze seinen vorherigen Inhalt auf den * Wert (: vor). * /

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