¿Cómo puedo lograr que IE8 acepte un CSS: antes de la etiqueta?

Tengo el siguiente código CSS¿Cómo puedo lograr que IE8 acepte un CSS: antes de la etiqueta?

.editable:before { 
    content: url(../images/icons/icon1.png); 
    padding-right:5px; 
}

Esto se utiliza en conjunción con el siguiente marcado:

<span class="editable"></span>

En cualquier otro navegador bendita en el mundo mi icono aparece, pero IE8 parece tener un problema con esto ¿No es el pseudo-elemento CSS2 :before? ¿No es content: también un comando CSS2? ¿lo que da?

Fuente

2010-03-30 William Calleja

No sé acerca de IE8, pero: antes y después no son compatibles con IE7 y versiones anteriores. No sé si finalmente agregaron soporte en 8 o no. Si se aseguraran de que la página no esté renderizando en la emulación IE7. – prodigitalson

Actualización: ¡Leí mal la página! IE 8 admite: antes con imágenes, simplemente no funciona cuando está en modo de compatibilidad IE7.

IE8 es compatible con :before, ~~pero no~~ y también imágenes como contenido cuando no está en modo de compatibilidad. ¡Felicitaciones a @toscho por probar!

Cómo me gusta quirksmode.org, que hace frente a estas cosas, al menos, a medio camino soportable. ¡El chico merece una medalla!

Fuente

2010-03-30 15:05:52

Ah, y si mal no recuerdo, tampoco puede poner código html en él, así que está fuera ... – NibblyPig

@SLC: Se procesa como texto, sí. – ANeves

Es posible utilizar la imagen como fondo para el contenido generado:

<!DOCTYPE html> 
<meta charset="UTF-8"> 
<title>Generated content with an image</title> 
<style> 
p:before 
    { 
     content: ''; 
     padding: 20px; 
     background: url("css.png") center center no-repeat; 
    } 
</style> 
<p>Test</p>

Obras en IE 8, Opera y Mozilla. Live-Demo.

Fuente

2010-03-30 15:34:41 fuxia

¡tienes razón! IE8 como IE8 admite imágenes como contenido. Saludos, actualicé mi respuesta. +1. –

En realidad, debe tener cuidado aquí y leer los detalles. Para más detalles, ver this link - que establece

En Windows Internet Explorer 8, así como las versiones posteriores de Windows Internet Explorer en el modo estándar de IE8, sólo la forma de una sola de colon de se reconoce este pseudo-elemento -es decir,: antes. Comenzando con Windows Internet Explorer 9, el pseudo-elemento :: before requiere dos puntos , aunque el formulario de un punto aún se reconoce y se comporta como de forma idéntica al formulario de dos puntos.

Significado para los navegadores <IE9 - debe utilizar :before y para >=IE9 - debe utilizar ::before

Fuente

2012-04-17 13:36:42 Tim

viendo esto me ahorró un montón de tiempo, IE8 no me funcionaba porque tenía :: –

el doble colon era mi problema, gracias por el aviso. ¿Cómo hace esto compatible con versiones anteriores? Es decir. ¿usar solo dos puntos si es menor que IEX frente a dos puntos si es mayor que IEY? – Jacques

@ Jacques, el único colon funcionará igual de bien en IE> = 9. Así que, por ahora, quédate con los dos puntos (que es el estándar CSS2.1). Solo CSS3 diferencia entre dos puntos simples y dobles para pseudo selectores y pseudo elementos. –

En el uso: before y: after, pero tenga cuidado de no utilizar dos puntos dobles (:: después - no trabajo, pero: después funcionará). Perdí unos 20 minutos por esto ...

Fuente

2012-10-15 12:26:17 marinbgd

Gracias, esta es en realidad la respuesta que personalmente estaba buscando. IE8 ahora está funcionando para mí. (Stupid IE8!) – philtune

Usted señor, me salvó de una sesión de depuración potencialmente todo el día por qué este & $ (* # no funcionaría, mientras que cada tabla de compatibilidad dice que debería. –

pero es mejor utilizar :: antes para los navegadores modernos no seguro si puede duplicar como cerrar: antes, cerrar :: antes {etc ... – landed

Esto se está yendo fuera del asombroso ejemplo de Pekka ... Mis alturas en mi proyecto eran altas para la fila ... Así que agregué un relleno: 0px;

En caso de que llueva en este ...

.icon-spinner:before { 
    content: ''; 
    padding: 15px; 
    padding-bottom: 0px; 
    background: url("css.png") no-repeat left top; 
}

Fuente

2013-09-30 15:51:04 no1uknow

¿Cómo puedo lograr que IE8 acepte un CSS: antes de la etiqueta?

Respuesta

Cuestiones relacionadas