Gibt es eine Möglichkeit, IE7 in die Verwendung der Pseudo-Elemente zu überlisten: nach und vor?

Question

Ich habe eine Navigationsleiste in meiner Fußzeile auf meiner Seite, die alles eingerichtet und funktioniert in allem außer natürlich in IE7. Ich habe das: After-Pseudo-Element verwendet, um eine Pipe "|" nach jedem <li> in der Navigationsleiste, aber in IE7, wird es nicht angezeigt. Es ist keine große Sache, es ist nicht so hässlich, aber ich kann nichts finden, um es zu vertuschen oder IE7 zu täuschen, damit es funktioniert.

Answer 1

Habe es nicht selbst ausprobiert.

Aber ich habe ein Lesezeichen für einige Zeit jetzt.

Check it out: http://forabeautifulweb.com/blog/about/enable_css_pseudo-element_selectors_in_internet_explorer_with_ie-css3.js/

EDIT:

Stellen Sie sicher, auch die Kommentare lesen, die auch einige nützliche Informationen (jQuery zum Beispiel) enthält

Answer 2

Nr

Wie von 2012-01-03, unterstützt dieses Skript nur: vor und: nach auf IE8: http://code.google.com/p/ie7-js/

Ab 2012-01-03, Selectivizr, die here erwähnt wird, hat nicht: vor und nach.

Ab 2012-01-03, bedeutet dies nicht bereit aussehen (wenn auch vielleicht ist es): https://github.com/kevindees/ie7_pseudo_elements

Ich habe für eine Weile jetzt nach einer Möglichkeit, diese Pseudoelemente arbeiten auf IE7 zu bekommen, sieht aber so aus, als könnte es nicht gemacht werden.

Answer 3

Persönlich würde ich wahrscheinlich jQuery verwenden, um eine <span>|</span>:before oder :after hinzuzufügen. Wenn Sie es nur für diese einfache Frage brauchen wäre es wahrscheinlich viel leichter als ganze Bibliotheken (natürlich sein, dies macht nur Sinn, wenn Sie bereits mit jQuery.

$('.element-with-after-class').append('<span class="ie-safe-pseudo-after>|</span>'); 

oder

$('.element-with-before-class').prepend('<span class="ie-safe-pseudo-before>|</span>'); 

oder

$('.element-with-after-class:not(.element-with-after-class:last-child)').append('<span class="ie-safe-pseudo-after>|</span>'); 

Answer 4

Hier ist Ihre Arbeit IE7 Code:

HTML:

<ul> 
    <li>link</li> 
    <li>link</li> 
    <li>link</li> 
    <li>link</li> 
</ul>​ 

CSS:

li {display: inline;} 
li {*zoom: expression(this.runtimeStyle.zoom="1", this.insertBefore(document.createElement("i"), this.firstChild).className="ie-before");} 
li .ie-before {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '|');}​