Comment puis-je obtenir IE8 pour accepter un CSS :avant la balise?

J'ai le code CSS suivant

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

il est utilisé en conjonction avec le balisage suivant:

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

Dans tous les autres bienheureux navigateur dans le monde mon icône apparaît, mais IE8 semble avoir un problème avec cela. N'est-ce pas le :before pseudo-élément CSS2? n'est-ce pas content: également un CSS2 commande? ce qui donne?

Je Ne sais pas sur IE8, mais :before et :after ne sont pas pris en charge dans IE7 et ci-dessous. Ne sais pas si ils ont enfin ajouté la prise en charge de 8 ou pas. S'ils ne assurez-vous que la page n'est pas rendu dans IE7 émulation.

OriginalL'auteur William Calleja | 2010-03-30

  1. 23

    Mise à jour: j'ai mal lu la page! IE 8 ne support :avant avec des images, il n'a tout simplement pas quand il est dans IE7 en mode de compatibilité.

    IE8 prend en charge :before, mais pas et aussi des images que le contenu lorsqu'il n'est pas en mode de compatibilité. Bravo à @toscho pour les tests!

    J'adore quirksmode.org qui fait affaire avec ce genre de choses au moins à mi-chemin supportable. Le mec mérite une médaille!

    Ah et si je me souviens bien, vous ne pouvez pas mettre de code html en soit, l'utilisation d'un <img> est sorti...
    Il sera affiché comme du texte, oui.

    OriginalL'auteur Pekka 웃

  2. 24

    En fait, vous devez être prudent ici et lire le détail. Pour plus de détails, voir ce lien - qui stipule

    Dans Windows Internet Explorer 8, ainsi que les versions ultérieures de Windows
    Internet Explorer IE8 Normes de la mode, seulement celui-virgule forme de
    ce pseudo-élément est reconnu, :avant. Début avec
    Windows Internet Explorer 9, le ::avant de pseudo-élément nécessite deux
    deux points, si le colon est toujours reconnu et se comporte
    de manière identique pour les deux-virgule forme.

    Sens pour les navigateurs <IE9 - vous devez utiliser :before et pour >=IE9 - vous devez utiliser ::before

    voyant cela m'a sauvé beaucoup de temps, IE8 ne fonctionnait pas pour moi parce que j'ai eu ::
    double côlon a été mon problème, merci pour le heads up. Comment fait-on ce compatible? I. e. l'utilisation unique du côlon si c'est moins IEX vs deux points si il est plus grand que IEY?
    le seul colon fonctionnera tout aussi bien dans IE>=9. Donc pour l'instant, il suffit de coller le seul colon (qui est le CSS2.1 standard). Seulement CSS3 fait la distinction entre simple et double deux-points pour les sélecteurs de pseudo et pseudo-éléments.

    OriginalL'auteur Tim

  3. 10

    Lors de l'utilisation :before et :after, il suffit de faire attention à ne pas utiliser le double deux-points (::après ne fonctionne pas, mais :après le travail). J'ai perdu environ 20 minutes pour cette...

    Merci, c'est effectivement la réponse personnellement, j'ai été à la recherche pour. IE8 est maintenant un-workin' pour moi. (Stupide IE8!)
    Vous, monsieur, m'a sauvé d'une éventuelle journée de la session de débogage pourquoi ce &$(*# ne fonctionne pas alors que chaque tableau de compatibilité dit qu'il devrait.
    mais il vaut mieux utiliser ::avant pour les navigateurs modernes vous ne savez pas si vous pouvez doubler comme à proximité:avant, fermeture::before{etc...

    OriginalL'auteur marinbgd

  4. 6

    Vous pouvez utiliser cette image comme arrière-plan pour le contenu généré:

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

    Fonctionne dans IE 8, Opera et Mozilla. Live-Démo.

    vous avez raison! IE8 comme IE8 prend en charge les images en tant que contenu. Cheers, mise à jour de ma réponse. +1.

    OriginalL'auteur fuxia

  5. 0

    Cela va de Pekka est génial exemple...
    Mon hauteurs sur mon projet était à la hauteur de la ligne... j'ai Donc ajouté un padding-bottom: 0px;

    En cas de pluie....

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

    OriginalL'auteur no1uknow