web-dev-qa-db-fra.com

: après et: avant les pseudo-éléments css piratent pour IE 7

J'utilise :after et :before css pseudo-éléments et cela fonctionne très bien dans IE8, et tous les navigateurs modernes mais cela ne fonctionne pas très bien dans IE7. Existe-t-il des hacks connus pour contourner cela dans IE7?

htmlcssinternet-explorer-7pseudo-element
56
Soarabh

avec tout hack CSS pur, ce n'est pas possible.

Utilisez IE8.js http://code.google.com/p/ie7-js/

Il a un soutien pour cela. http://ie7-js.googlecode.com/svn/test/index.html

page de test également là

après - http://ie7-js.googlecode.com/svn/test/after.html

avant - http://ie7-js.googlecode.com/svn/test/before.html

Modifier après le 1er commentaire

Vous pouvez simplement conserver ce js pour IE6 et 7. les autres navigateurs ne le liront pas.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

Et si vous utilisez déjà jQuery dans votre projet, vous pouvez utiliser ce plugin

Pseudo Plugin jQuery

http://jquery.lukelutman.com/plugins/pseudo/

68
Jitendra Vyas

J'utilisais IE8.js (http://code.google.com/p/ie7-js/) dans un projet et j'ai dû le supprimer car il bloquait IE7 entre 10/15 secondes.

Pour maintenir le contenu généré avec: après et: avant les pseudo-éléments, sans IE8.js, j'ai fait ce qui suit:

   .tabs {
     *zoom: expression( 
          this.runtimeStyle.zoom="1",
          this.appendChild( document.createElement("small") ).className="after"
         );
   }

   .tabs:after,
   .tabs .after {
     content: '';
     display:block;
     height:10px;
     width:100%;
     background:red;
   }

Je préfère cette méthode plutôt qu'avec javascript, car cela gardera tous les sélecteurs au même endroit :)

52
vieron

Avant et après, vous pouvez utiliser ceci:

.tabs {
    *zoom: expression(
        this.runtimeStyle.zoom="1",
        this.insertBefore(
            document.createElement("div"),
            this.childNodes[0]
        ).className="before",
        this.appendChild(
            document.createElement("div")
        ).className="after"
    );
}

...

.tabs::before, .tabs .before {
    display: block;
    width: 10px;
    height: 20px;
    background-color: #eee;
    float: left;
}
.tabs::after, .tabs .after {
    display: block;
    width: 10px;
    height: 20px;
    background-color: #c0c;
    float: left;
}
4
atiruz

Si vous utilisez déjà Modernizr , il a une détection de base pour "Contenu généré par CSS".

Vous pouvez ensuite remplir le :before Ou :after Manquant à l'aide de JavaScript. Par exemple:

.selector:before, .selector-before {
    content: "Hello, world!";
    color: red;
}

jQuery pour insérer le contenu généré directement dans le DOM:

if (!Modernizr.generatedcontent) {
    $('.selector').prepend('<span class="selector-before">Hello, world!</span>');
}
3
Blazemonger

Eh bien, il y a un hack CSS pur qui fonctionne, en quelque sorte. C'est de la magie noire mais est parfois pratique lorsqu'il est utilisé à peine.

C'est expliqué ici: http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php http://web.archive.org/web/20080706132651/http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php

Fragment HTML: 

<div id="container">
 <!-- -->
 <div class="mainContent">
  <p>Blah blah</p>
  <p>Blah blah</p>
  <p>Blah blah</p>
  <!-- -->
 </div>
</div>

CSS: 

#container:before
{
 background: url("corners-top.png");
 content: "";
 display: block;
 height: 24px;
}

#container .mainContent:after
{
 background: url("corners-bottom.png");
 content: "";
 display: block;
 height: 28px;
}

Feuille de style spécifique à IE: 

#container *
{
 background: url("corners-top.png");
 display: list-item;
 font-size: 24px;
 line-height: 24px;
 list-style: none;
}

#container .mainContent
{
 background: none;
 display: block;
 font-size: 1em;
 line-height: 1.25;
}

#container .mainContent *
{
 background: url("corners-bottom.png");
 font-size: 28px;
 line-height: 28px;
}

/*
  Now, still in the IE-specific stylesheet, remove the styles for all
  element descendants of .mainContent. Refer to each element by tag name.
*/

#container .mainContent p, #container .mainContent div, (And so on...)
{
 background: none;
 display: block;
 font-size: 1em;
 line-height: 1.25;
}
3
Jens

Vous pouvez utiliser des expressions CSS pour ce faire. Par exemple, vous pouvez brancher un symbole ♣ via:

expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML)

J'ai écrit un article à ce sujet sur Smashing Magazine, voir http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/

3
Thierry Koblentz

Lorsque j'ai besoin de support pour: avant et: après j'utilise le Gist suivant que j'ai écrit. C'est du pur CSS (au point où vous écriviez simplement du CSS) mais inclut une expression CSS. Fonctionne dans la plupart des cas.

https://Gist.github.com/236248

/* =============================================================================
    CSS Declarations
   ========================================================================== */

/* ==|== The Standard Way =================================================== */

.foo::before {
  /* ...css rules... */
}

.foo::after{
  /* ...css rules... */
}


/* ==|== The IE Way =================================================== */
/* NOTE: a comma separated IE & Standard rule won't work.               *
 * IE doesn't understand ::before or ::after & ignores the declaration  */

.lt-ie9 .foo:before,
.lt-ie8 .foo .ie-before {
  /* ...css rules... */
}

.lt-ie9 .foo:after,
.lt-ie8 .foo .ie-after {
  /* ...css rules... */
}


/* =============================================================================
    IE6 & IE7 polyfills
   ========================================================================== */

.lt-ie8 .foo {
  zoom: expression(
    this.runtimeStyle.zoom="1",

    /* ::before polyfill - creates <i class="ie-before"></i> */
    this.insertBefore( document.createElement("i"), this.firstChild ).className="ie-before",

    /* ::after polyfill - creates <i class="ie-after"></i> */
    this.appendChild( document.createElement("i") ).className="ie-after"
  );
}
2
CoryDorning