: après et: avant éléments css pseudo pirater pour IE 7

Question

J'utilise :after et :before éléments css pseudo et il fonctionne bien dans IE8, et tous les navigateurs modernes, mais il ne fonctionne pas bien dans IE7. Y at-il des hacks connus pour contourner ce problème dans IE7?

Answer 1

avec un hack CSS pur ce n'est pas possible.

Utilisez 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

aussi il

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 juste garder ce js pour IE6 et 7. autre navigateur Je ne le lirai 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 que vous pouvez utiliser ce plugin

jQuery Pseudo Plugin

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

Answer 2

Eh bien, il est un hack pur CSS qui fonctionne , sorte de. C'est de la magie noire, mais c'est parfois utile quand on l'utilise de façon irrégulière.

Il est expliqué ici: http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.phphttp://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; 
} 

stylesheet IE 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 3

Vous pouvez utiliser des expressions CSS pour le 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/

Answer 4

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

Pour conserver le contenu généré avec: after et: before les pseudo-éléments, sans IE8.js, je l'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 de javascript, car cela permet de garder tous les sélecteurs au même endroit :)

Answer 5

Lorsque besoin d'un soutien pour: avant et: après que je l'utilise l'essentiel suivant que j'ai écrit. C'est du CSS pur (au moment où vous écrivez simplement CSS) mais inclut une expression CSS. Fonctionne dans la plupart des cas.

https://gist.github.com/2362483

/* ============================================================================= 
    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" 
); 
} 

Answer 6

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

Si vous utilisez déjà Modernizr, il a un noyau pour détecter "contenu généré par CSS".

Vous pouvez ensuite remplir le :before ou :after en utilisant JavaScript. Par exemple:

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

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

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