: after et: before css pseudo éléments pirater pour IE 7

Question

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

Answer 1

avec toute pure CSS hack il n'est pas possible.

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

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

page de test là aussi

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

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

Edit après le 1er commentaire

Vous pouvez juste garder ce js pour IE6 et 7. d'autres navigateur ne sera pas lue.

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

Et si vous êtes déjà à l'aide de jQuery dans votre projet que vous pouvez utiliser ce plugin

jQuery Pseudo Plugin

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

Answer 2

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

Pour conserver le contenu généré avec: after et: before 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 façon plutôt que javascript, car cela gardera tous les sélecteurs au même endroit :)

Answer 3

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;
}
 

Answer 4

Eh bien, il est un pur CSS hack qui fonctionne, en quelque sorte. C'est de la magie noire, mais est parfois utile si vous l'utilisez région de comprendre.

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;
}

IE-feuille de style spécifique:

#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;
}

Answer 5

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

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

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