StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POz-index IE8 bug on generated content with :after
text
Body
copied!<p>This is a known error in IE8, look at the last bug here:<br> <a href="http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html">http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html</a> </p> <p>Now, playing a bit with a simple example I found this (test it using IE8):<br> <a href="http://jsfiddle.net/AjCPM/">http://jsfiddle.net/AjCPM/</a> </p> <pre><code><div id="target"> <div>div</div> </div> #target { position: relative; width: 200px; height: 200px; z-index: 1; } #target>div{ background: red; width: 200px; height: 200px; position: relative; z-index: 0; } #target:before { top: 0; left: 10%; width: 100%; height: 100%; background: cyan; content: "after"; position: absolute; z-index: 10; } </code></pre> <p>IE8 renders the cyan rectangle (the :after) below the red rectangle, even when it has lower z-index.<br> <em>And now the tricky part:</em><br> <strong>change the z-index for #target>div from 0 to -1 and voilá ! it's solved !</strong> </p> <p>So I solved my problem now using a lot of z-index: -1;<br> But I don't feel safe with this. </p> <p><strong>Do you know a better solution?</strong> </p> <p>I'm using the :after pseudoelement because I have a list of products, and I want to add an image to the the item when it has the class 'sold' for example.<br> I can create in the server or with JS a new html element for that, but I think using :after is the correct semantic solution.<br> The problem is that I'm a bit paranoid about the :after pseudoelement now, <strong>do you think is better to avoid it?</strong></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload