IE tachando CSS de pseudoelemento?

81

He intentado que algunos pseudo elementos funcionen en IE, pero no me lo permite.

Tacha el CSS y actúa como si no estuviera allí, lo que me agrega un poco.

¿Alguien sabría lo que estoy haciendo mal?

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

Captura de pantalla de lo que sucede:

Kairowa
fuente
11
Hilarantemente, no tacha los -webkit-bits.
BoltClock
5
Pfff, cuéntamelo. Apuesto a que me está trolleando a propósito. Estúpido IE.
Kairowa
1
De todos modos, ¿en qué versión de IE estás probando y qué te dice sobre el modo documento / modo navegador? Nunca he entendido realmente por qué IE elige actuar de esta manera, pero espero que esas cosas proporcionen algunas pistas.
BoltClock
1
IE11. Probé IE9, IE10 y Edge en el modo documento, pero desafortunadamente fue en vano.
Kairowa

Respuestas:

60

Este es un problema conocido, pero los estilos de hecho se están aplicando. Las herramientas de desarrollo creen que los estilos de los pseudoelementos están siendo reemplazados por los estilos correspondientes de los elementos principales. Esto se demuestra fácilmente inspeccionando el estilo Computado del elemento padre y observando (lo que las herramientas F12 creen que son) estilos en competencia:

ingrese la descripción de la imagen aquí

Sin embargo, nuevamente, estos estilos se están aplicando a los elementos correctos, independientemente de lo que crean o sugieran las herramientas de desarrollo. Puede confirmar esto ejecutando sobre el elemento principal y los dos pseudo-elementos y registrando su altura calculada:

(function () {

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

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

}());

Verificaré si ya tenemos un problema interno que rastrea este error y agregaré esta pregunta. En términos generales, tratamos de prestar a problemas como este la cantidad de atención proporcional a la cantidad de dolor que el problema está causando en el mundo real. Entonces, tener su pregunta como una nueva adición en el ticket puede ayudarnos a avanzar en una solución :)

Sampson
fuente
15
Veo el mismo problema en IE11, pero los estilos de pseudoelementos no se aplican. Incluso cuando se desactivan las anulaciones parentales asumidas en el panel Computado, los estilos de pseudoelementos no se aplican. La única parte de todo el bloque que se representa es la regla de contenido, todo lo demás se ignora.
gps03
Al entrar en Computado, pude hacer clic en una propiedad y descubrir que estaba siendo anulada. Anulé el fondo para un th y los iconos de intercalación no se mostraban para ordenar (Datatables). ¡Gracias!
Exzile
Todos los ::afterpseudoestilos de mi código están tachados en IE11 y Edge. Todas las reglas se aplican de hecho :-) Todos menos uno: cursor: pointer. Es para un menú de hamburguesas móvil, por lo que puedo soltar el puntero (ya que no espero mucho sobre ese tamaño de pantalla).
Michael Benjamin
@Michael_B Eso es un error conocido; Creo que los estilos de pseudoelementos creen que entran en conflicto con los estilos de elementos principales. Por lo tanto, todo lo que esté configurado en el pseudo elemento, que también esté configurado en el padre, se tachará.
Sampson
Hola, ¿cuál es la solución? Estoy usando IE11 11.321.14393.0 e IE anula mi
pseudoclase
42

¡Tuve exactamente el mismo problema! Debes darle una propiedad a tus :beforey :afterpseudo elementos display.

Agregue lo siguiente a :beforey :after.

display: block; 

Esto debería solucionar su problema. :)

Freddie
fuente
1
comparta las propiedades que ha establecido actualmente. Supongo que no tiene configurada la propiedad de contenido o está tratando de establecer un pseudo elemento en elementos que no permiten pseudos
Freddie
1
¡Esto me arregló las cosas! Las propiedades todavía están tachadas en Dev Tools, pero el elemento aparece correctamente ahora.
Nikki Erwin Ramirez
¡Muchas gracias! Primero hice esto, no ayudó, pero luego me di cuenta de que no establecía la propiedad izquierda. Entonces, display: block; ya la izquierda: 0; ¡IE sanó!
Max Kurtz
1
¡Otro día, otro truco de IE11! Espera ... ya es 2020 ...
Neurotransmisor
2

Para agregar a la respuesta anterior. Intenté display: block pero mi problema era que la imagen de fondo salía deformada. En su lugar, utilicé a continuación:

display: inline-block;

Esto solucionó mi problema con imágenes deformadas dentro de mi: antes: después

Parque Edmund
fuente
2

Como tuve el mismo problema con Material Font e IE11 y no pude resolverlo con las soluciones anteriores, miré más allá:

La documentación de los iconos de material design menciona el uso

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

para navegadores que no admiten ligaduras. Los puntos de código para cada elemento se enumeran aquí: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

El problema con los elementos: after es que HTML en la contentetiqueta -Tag se representa como texto sin formato mostrando el & # x .. por lo que debe usar el \ escape de la siguiente manera:

content:  "\e5c5";
cristiano
fuente
El uso del carácter Unicode solucionó mi problema. Pero definitivamente vale la pena señalar que los estilos de pseudoelementos se aplican en IE11 incluso si parece que están tachados. La respuesta aceptada junto con esta respuesta me ayudó a ver eso.
samnau
0

¡Tuve exactamente el mismo problema! Debes darle una overflow : visiblepropiedad al padre de tu pseudo elemento .

Jabicks Ajith
fuente
-1

Consulte este enlace " http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ", como se cita en este enlace

: after y: before no son compatibles con Internet Explorer 7 y anteriores, en ningún elemento.

Tampoco está diseñado para usarse en elementos reemplazados como elementos de formulario (entradas) y elementos de imagen.

En otras palabras, es imposible con CSS puro.

/ * * El truco está aquí: * este selector dice "tomar el primer elemento dom después * del texto de entrada (+) y establecer su contenido anterior al * valor (: before). * /

input#myTextField + *:before {
       content: "👍";
    } 
pjain
fuente
Trabajar con jQuery está disponible.
pjain