:After and :Before CSS Pseudo Elements Hack For Internet Explorer 7

:after and :before CSS pseudo elements hack for Internet Explorer 7

with any pure CSS hack it's not possible.

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

It has support for this. http://ie7-js.googlecode.com/svn/test/index.html

test page also there

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

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

Edit after 1st comment

You can just keep this js for IE6 and 7. other browser will not read it.

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

And if you are already using jQuery in your project than you can use this plugin

jQuery Pseudo Plugin

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

Is there a faster way to give :before and :after selector support in IE7?

From the comments:

If you have zillions of :before and
:after, the cause of the problem could
be IE7's slowish JavaScript engine -
if this is the case, I think you're
out of luck - IE7.js is probably as
efficient as you're going to get.

and:

@thirtydot I have a page with only one
:before and :after and that is taking
about 7-9 seconds, so I think you are
right about it being the number of
selectors I'm using.

IE7 :(

What is the alternative for using :after and :before in IE7

Here is the link on stackoverflow and the same question, somehow I am sure you'll find the answer you want here.

:after and :before css pseudo elements hack for IE 7

Support of :after in IE7

There is no support for :before and :after in IE7, there are other options that you can use like IE8.js.

Use after: and before: selectors in versions 6 and 7 of Internet Explorer

The before and after css elements should work in ie8 and up.

For IE7 you can use something like Use the IE7.js hack to add after & before pseudo element support.

I would recommend using a conditional statement to include the file such as;

<!--[if IE 7]>
    insert script here
<![endif]-->

For IE6, I personally would not bother and just degrade gracefully.

Another option is to use ie-css3.js.

:after pseudoclass on IE7

style .arrow in conditional comments specifically for ie7. ie7 doesn't understand :after,:before,:content or display:inline-block for that matter. without looking at the site, it's hard to offer a solid fix. offhand, i'd make it display:block; with a text-indent and use background-image.

CSS :after on ie7, jquery pattern

Would be interesting to see your CSS, but in lack of that I guess that your content should read:

url(/images/image.jpg)

starting with the slash so that the path starts at your server's root (instead of being relative to your current folder).

Edit: So, in summary I'd suggest the following style:

#yourElementId, #yourElementId:after {
    after: url(/images/image.jpg);      /* IE7 polyfill */
    content: url(/images/image.jpg);    /* css for other browsers */
}

---

Related Topics