IE wykreślający pseudoelement CSS?

82

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:

Kairowa
źródło
11
Co zabawne, nie wykreśla to -webkit-bitów.
BoltClock
5
Pfff, opowiedz mi o tym. Założę się, że celowo mnie trolluje. Głupi IE.
Kairowa
1
W każdym razie, w jakiej wersji IE testujesz i co mówi ci o trybie dokumentu / trybie przeglądarki? Nigdy tak naprawdę nie rozumiałem, dlaczego IE decyduje się działać w ten sposób, ale mam nadzieję, że te rzeczy dostarczą kilku wskazówek.
BoltClock
1
IE11. Próbowałem IE9, IE10 i Edge w trybie dokumentu, niestety bezskutecznie.
Kairowa

Odpowiedzi:

60

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:

wprowadź opis obrazu tutaj

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

Sampson
źródło
15
Widzę ten sam problem w IE11, ale style pseudoelementów nie są stosowane. Nawet po wyłączeniu założonych nadpisań rodzicielskich w panelu Obliczone, style pseudoelementów nie są stosowane. Jedyną częścią renderowanego całego bloku jest reguła treści, wszystko inne jest ignorowane.
gps03
Wchodząc do Computed, byłem w stanie kliknąć właściwość i stwierdzić, że została zastąpiona. Przesłoniłem tło dla th i ikony daszków nie były wyświetlane do sortowania (zbiory danych). Dzięki!
Exzile
Wszystkie ::afterpseudo 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).
Michael Benjamin
@Michael_B To znany błąd; Uważam, że style pseudoelementów są sprzeczne ze stylami elementów nadrzędnych. Zatem wszystko, co jest ustawione w pseudoelemencie, który jest również ustawiony w rodzica, zostanie przekreślone.
Sampson,
Cześć, więc jakie jest rozwiązanie? Używam IE11 11.321.14393.0 i IE zastępuje moją pseudo klasę ...
Hazlo8
42

Miałem dokładnie ten sam problem! Musisz nadać swojemu :beforei :afterpseudo elementom displaywłaściwość.

Dodaj następujące elementy do :beforei :after.

display: block; 

To powinno rozwiązać problem. :)

Freddie
źródło
1
udostępniać aktualnie ustawione właściwości. Zgaduję, że albo nie masz ustawionej właściwości content, albo próbujesz ustawić pseudoelement na elementach, które nie pozwalają na pseudo
Freddie
1
To naprawiło sprawę dla mnie! Właściwości są nadal przekreślone w narzędziach deweloperskich, ale element jest teraz wyświetlany poprawnie.
Nikki Erwin Ramirez
Wielkie dzięki! Najpierw to zrobiłem, to nie pomogło, ale potem zauważyłem, że nie ustawiłem lewej właściwości. Więc wyświetl: blok; i po lewej: 0; wyleczył IE!
Max Kurtz
1
Kolejny dzień, kolejna sztuczka z IE11! Czekaj ... jest już 2020 rok ...
Neurotransmiter,
2

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

Edmund Park
źródło
2

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">&#xE87C;</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";
chrześcijanin
źródło
Użycie znaku Unicode rozwiązało mój problem. Ale zdecydowanie warto zauważyć, że style pseudoelementów są faktycznie stosowane w IE11, nawet jeśli wygląda na to, że są przekreślone. Zaakceptowana odpowiedź wraz z tą odpowiedzią pomogła mi to zobaczyć.
samnau
0

Miałem dokładnie ten sam problem! Musisz nadać rodzicowi swojego pseudo elementu overflow : visiblewłaściwość.

Jabicks Ajith
źródło
-1

Sprawdź ten link „ http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ” cytowany z tego linku

: after i: before nie są obsługiwane w programie Internet Explorer 7 i poniżej, na żadnych elementach.

Nie jest również przeznaczony do zastępowania elementów, takich jak elementy formularzy (dane wejściowe) i elementy obrazu.

Innymi słowy, jest to niemożliwe w przypadku czystego CSS.

/ * * 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: "👍";
    } 
pjain
źródło
Dostępna jest obejście z jQuery.
pjain