IE Pseudoelement CSS streichen?

81

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:

Kairowa
quelle
11
Komischerweise werden die Teile nicht durchgestrichen -webkit-.
BoltClock
5
Pfff, erzähl mir davon. Ich wette, es trollt mich absichtlich. Blöder IE.
Kairowa
1
Wie auch immer, in welcher IE-Version testen Sie und was sagt sie über den Dokumentmodus / Browsermodus aus? Ich habe nie wirklich verstanden, warum sich IE für dieses Verhalten entscheidet, aber hoffentlich liefern diese Dinge einige Hinweise.
BoltClock
1
IE11. Ich habe IE9, IE10 und Edge im Dokumentmodus ausprobiert, leider ohne Erfolg.
Kairowa

Antworten:

60

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):

Geben Sie hier die Bildbeschreibung ein

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 :)

Sampson
quelle
15
Ich sehe das gleiche Problem in IE11, aber Pseudoelementstile werden nicht angewendet. Selbst wenn die angenommenen elterlichen Überschreibungen im Bereich "Berechnet" deaktiviert werden, werden Pseudoelementstile nicht angewendet. Der einzige Teil des gesamten Blocks, der gerendert wird, ist die Inhaltsregel. Alles andere wird ignoriert.
GPS03
Beim Aufrufen von "Berechnet" konnte ich auf eine Eigenschaft klicken und feststellen, dass sie überschrieben wurde. Ich habe den Hintergrund für ein Th überschrieben und die Caret-Symbole wurden nicht zum Sortieren angezeigt (Datatables). Vielen Dank!
Exzile
Alle ::afterPseudostile in meinem Code sind in IE11 und Edge durchgestrichen. Alle Regeln werden tatsächlich angewendet :-) Alle bis auf eine : cursor: pointer. Es ist für ein mobiles Hamburger-Menü gedacht, damit ich den Zeiger loslassen kann (da ich bei dieser Bildschirmgröße nicht viel Schweben erwarte).
Michael Benjamin
@Michael_B Das ist ein bekannter Fehler; Ich glaube, die Pseudoelementstile glauben, dass sie mit den übergeordneten Elementstilen in Konflikt stehen . Alles, was für das Pseudoelement festgelegt ist, das auch für das übergeordnete Element festgelegt ist, wird durchgestrichen.
Sampson
Hallo, welches ist die Lösung? Ich verwende IE11 11.321.14393.0 und IE überschreibt meine
Pseudoklasse
42

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

Freddie
quelle
1
Teilen Sie mit, welche Eigenschaften Sie aktuell festgelegt haben. Ich gehe davon aus, dass Sie entweder die Content-Eigenschaft nicht festgelegt haben oder dass Sie versuchen, ein Pseudoelement für Elemente festzulegen, die keine Pseudos zulassen
Freddie
1
Das hat das Problem für mich behoben! Die Eigenschaften sind in Dev Tools immer noch durchgestrichen, aber das Element wird jetzt ordnungsgemäß angezeigt.
Nikki Erwin Ramirez
Vielen Dank! Zuerst habe ich das gemacht, es hat nicht geholfen, aber dann habe ich bemerkt, dass ich kein linkes Eigentum gesetzt habe. Also, Anzeige: Block; und links: 0; IE geheilt!
Max Kurtz
1
Ein neuer Tag, ein neuer IE11-Trick! Warten Sie ... es ist schon 2020 ...
Neurotransmitter
2

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

Edmund Park
quelle
2

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";
Christian
quelle
Die Verwendung des Unicode-Zeichens hat mein Problem behoben. Aber es ist definitiv erwähnenswert, dass die Pseudoelementstile tatsächlich in IE11 angewendet werden, auch wenn es so aussieht, als wären sie durchgestrichen. Die akzeptierte Antwort zusammen mit dieser Antwort half mir, das zu sehen.
Samnau
0

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

Jabicks Ajith
quelle
-1

Ü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: "👍";
    } 
pjain
quelle
Workaround mit jQuery ist verfügbar.
pjain