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:
css
internet-explorer
ie-developer-tools
Kairowa
quelle
quelle
-webkit-
.Antworten:
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 :)
quelle
::after
Pseudostile 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).Ich hatte genau das gleiche Problem! Sie müssen Ihren
:before
und:after
Pseudo-Elementen einedisplay
Eigenschaft geben.Fügen Sie die folgende auf die
:before
und:after
.display: block;
Dies sollte Ihr Problem beheben. :) :)
quelle
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
quelle
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"></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";
quelle
Ich hatte genau das gleiche Problem! Sie müssen dem übergeordneten Element Ihres Pseudoelements eine
overflow : visible
Eigenschaft geben.quelle
Ü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
/ * * 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: "👍"; }
quelle