CSS :before/:after Selectors in IE 6,7

Question

I know that :before/:after selectors are not available in IE 6,7
http://www.quirksmode.org/css/contents.html

Is there a js hack to enable support for these selec

Answer 1

I don't know how well it works; but a quick search found a promising result:

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

CSS2's :before and :after pseudo-selectors are really handy ... but they don't work in Internet Explorer. Nope, not even IE7. I bet you're thinking: "But what if we used as many proprietary Microsoft features as possible all at the same time, that'll show 'em!" And you know what? You're absolutely right. You've just gotta love that this — * { behavior: expression(...); } — can (more or less) enable :before and :after for IE5.5+

With jquery.pseudo.js in the of your document, you can then do:

p:before, p {
    before: 'foo';
    content: 'foo'; }

p:before, p .before {
    color: blue; }

Answer 2

using Jquery you can bosh in the supposrt wherever you like, bit like this nugget

 /* fix top nav ui in ie6*/
if ($.browser.msie && $.browser.version <= 6 ) {
    $('#topNav ul li a:not(:last)').after("/");
}

Answer 3

Found this when trying to to create this https://gist.github.com/1133433 with support for IE 6 and 7. I had tried to use the CSS3 flexible box model, but hit a bug in web-kit when using the CSS3 Flexible Box w/ box-sizing: border-box, padding and fixed widths. It breaks the default box-align: stretch (equal heights). It was either this or resolve to use a table.

The CSS3 Flexible Box seems to hard to control. If you want to set fixed widths, and reap the benefits of box-align: stretch as well as set the padding, you're SOL.

Answer 4

There's a Javascript solution called IE7, it fixes common IE bugs: http://code.google.com/p/ie7-js/

Answer 5

of course jQueries before and after

what else ;)