z-index IE8 bug on generated content with :after

Question

This is a known error in IE8, look at the last bug here:
http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html

Now, playing a bit with a simple e

Answer 1

A quick note on the :before and :after selectors in IE8: for them to work you need to declare a DOCTYPE. See this W3Schools page. I am guessing you have already done this though.

See the answer to this question if you haven't already (I think you probably have).

Basically, the bottom line is that it's a bug. Your solution of using a z-index of -1 is not ideal, but then again NO work around for the bug is going to be ideal. I don't think that using a z-index of -1 is something to be overly concerned about, unless it causes issues in your layout. If you are very concerned, then why don't you ONLY target IE8 w/ the fix. For example, you could use a conditional comment like so:

Behaviors like the one you are experiencing is one of the reasons many developers despise IE. In many cases, including this one, there is no perfect solution. You could:

1. stop using the :before and :after selectors & adjust your HTML/CSS to something that is IE8-friendly.
2. Use conditional comments or JavaScript to issue a fix that specifically targets IE8
3. Keep hacking and try to find another HTML/CSS combo that works -- but chances are it won't be any more ideal than your negative z-index solution.

Unfortunately, in many cases there is no such thing as a "semantically correct" cross-browser website.

My two cents is to create an IE8 stylesheet and use the conditional comment I displayed above to load the stylesheet. Within the stylesheet, use the z-index: -1 solution you came up with. Many websites use IE-targeted stylesheets.