Próbowałem zmusić kilka pseudo elementów do pracy w IE, ale to po prostu mi na to nie pozwala.
Przekreśla CSS i zachowuje się tak, jakby go tam nie było, co trochę mnie pogarsza.
Czy ktoś wiedziałby, co robię źle?
.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>
Zrzut ekranu przedstawiający, co się dzieje:
css
internet-explorer
ie-developer-tools
Kairowa
źródło
źródło
-webkit-
bitów.Odpowiedzi:
Jest to znany problem, ale style są w rzeczywistości stosowane. Narzędzia programistyczne uważają, że style pseudoelementów są zastępowane przez odpowiadające im style elementów nadrzędnych. Można to łatwo wykazać, sprawdzając wyliczony styl elementu-rodzica i przyglądając się (za co uważają narzędzia F12) konkurującymi stylami:
Jednak ponownie style te są w rzeczywistości stosowane do właściwych elementów - niezależnie od tego, w co wierzą lub sugerują narzędzia programistyczne. Możesz to potwierdzić , przechodząc przez element nadrzędny i dwa pseudoelementy i rejestrując ich obliczoną wysokość:
(function () { var el = document.querySelector( ".newbutton" ); [ "", "::before", "::after" ].forEach(function ( e ) { // Output: 74px, 80px, 80px console.log( window.getComputedStyle( el, e ).height ); }); }());
Sprawdzę, czy mamy już wewnętrzny problem ze śledzeniem tego błędu i dodam do niego to pytanie. Ogólnie rzecz biorąc, staramy się poświęcić takim problemom ilość uwagi proporcjonalną do żalu, jaki dana kwestia powoduje w prawdziwym świecie. Tak więc umieszczenie Twojego pytania jako nowego dodatku na bilecie może pomóc nam posunąć naprzód :)
źródło
::after
pseudo style w moim kodzie zostały przekreślone w IE11 i Edge. Wszystkie zasady rzeczywiście stosowane :-) Wszystkie oprócz jednego:cursor: pointer
. To dla mobilnego menu z hamburgerami, więc mogę puścić wskaźnik (ponieważ nie spodziewam się dużo zawisania przy tym rozmiarze ekranu).Miałem dokładnie ten sam problem! Musisz nadać swojemu
:before
i:after
pseudo elementomdisplay
właściwość.Dodaj następujące elementy do
:before
i:after
.display: block;
To powinno rozwiązać problem. :)
źródło
Aby dodać do powyższej odpowiedzi. Próbowałem display: block, ale moim problemem było to, że obraz tła był wypaczony. Zamiast tego użyłem poniżej:
display: inline-block;
To rozwiązało mój problem z wypaczonymi obrazami w my: before: after
źródło
Ponieważ miałem ten sam problem z Material Font i IE11 i nie mogłem go rozwiązać powyższymi rozwiązaniami, szukałem dalej:
Dokumentacja ikon projektowania materiałów wspomina o użyciu
<i class="material-icons"></i>
dla przeglądarek nie obsługujących ligatur. Punkty kodowe dla każdego elementu są wymienione tutaj: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
Problem z: po elementach polega na tym, że HTML w
content
-Tag jest renderowany jako zwykły tekst pokazujący & # x .., więc musisz użyć \ escape w następujący sposób:content: "\e5c5";
źródło
Miałem dokładnie ten sam problem! Musisz nadać rodzicowi swojego pseudo elementu
overflow : visible
właściwość.źródło
Sprawdź ten link „ http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ” cytowany z tego linku
/ * * Sztuczka jest tutaj: * ten selektor mówi "weź pierwszy element dom po * tekście wejściowym (+) i ustaw jego zawartość przed * wartością (: przed). * /
input#myTextField + *:before { content: "👍"; }
źródło