CSS3 Styles Applied to :before and :after Override Other Styles

[Kravimir]

Look at this example in IE8 and another (more) modern browser and note which corners are rounded.

This also illustrates the understandable limitation of CSS3 PIE not working with pseudo-elements.

A workaround for now (at least in some cases) is to use the "-pie-" prefixed properties on elements but not the pseudo-element(s), to prevent the override.

[lojjic]

I can't get that fiddle to load in IE8, it just throws a bunch of errors.

[lojjic]

Copying your code to a local document, I can see the bug you're talking about.

Unfortunately, this looks like an IE bug and I don't see an easy way for PIE to work around it. Asking IE for the border-radius from the element's currentStyle returns the value from the last pseudo rather than the value from the element itself. An obvious bug in IE's style resolution engine.

I do notice that if you move your pseudo rules above the main element's rule, then this last-one-wins bug works in your favor and it gets the correct value. This seems like it's probably an acceptable workaround in most stylesheets.

I'll keep this ticket open for a bit longer so I can see if any possible fix occurs to me, but to be honest I'm thinking this will probably end up being closed as can't fix.

[Kravimir]

Thanks for taking a look at this.

And thanks for the suggestion of reordering the rules which does seem to be an alternative workaround.

I would conjecture that between the time I posted this issue and now changes have been made to jsFiddle which broke its compatibility with IE8.