I think I may have found an answer. It appears from my searches for similar posts, the problem is with IE's handling of pseudo elements. Unfortunately, I number of answers/suggestions on these posts don't appear to work in my case, except for this SO item. Basically, it suggests forcing IE to redraw the pseudo element by temporarily adding to the DOM a style tag which removes all pseudo content, and then removing that style tag immediately afterwards. It seems to work, when combined with a check for IE8 based on this SO item. I added this to my script:
var ie = (function () {
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
} ());
function redrawPseudos() {
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important;}';
head.appendChild(style);
setTimeout(function () {
head.removeChild(style);
}, 0);
}
So when I have to add/remove a class, which I expect to impact the styling of a pseudo element, I have to do this:
$('.class1').addClass('newclass');
if (ie === 8) {
redrawPseudos();
}
It is probably an expensive way of doing it. But I only have less than a dozen of pseudo elements.
ADDED:
You can improve this by passing a selector to redrawPseudos() and including it to the style. This will limit the redraw to the elements identified by your selector.
function redrawPseudos(sel) {
...
style.styleSheet.cssText = sel + ':before, ' + sel + ':after, ' + sel + ' *:before, ' + sel + ' *:after ' + '{content:none !important;}';
...
}