应用css类后，IE8无法正确设置font-awesome图标的样式

Question

http://jsfiddle.net/7Q7ht/10/

<a class="edit linkButton" href="javascript:void(0)" title="Enable rack editing">
    <span class="icon-pencil"></span>
    Edit
</a>

$(function(){

    setTimeout(function(){

        $('.linkButton').addClass('disabled');

    }, 2000);

    setTimeout(function(){

        $('.linkButton').removeClass('disabled');

    }, 4000);
});

a.linkButton {
    color: red;
}

a.linkButton:hover {
    color: blue;
}

a.linkButton.disabled {
    color: gray;
}

相当简单的代码。 适用于现代浏览器。 在IE8下，当我将禁用的类添加到linkBut​​ton时，图标 - 铅笔跨度继续被涂成红色而不是灰色。 这种事情有一个简单的解决方法吗？

这是一张图片，不要担心图标没有显示，我只是没有加载字体：

Answer 1

在IE8中，它从红色变为灰色，然后再变为红色。 这与Chrome中的相同。

您可能知道Microsoft说disabled CSS3伪类仅适用于IE9及更高版本。 否则，问题如何在IE8中禁用textarea样式？ 建议一些解决方案

Answer 2

IE8不会在不更改内容的情况下重绘伪元素。

你可以用那个黑客来解决这个问题......

a.linkButton {
    color: red;

    .icon-pencil {
        content: "\F040 "
    }
}

a.linkButton:hover {
    color: blue;

    .icon-pencil {
        content: "\F040 "
    }
}

a.linkButton.disabled {
    color: gray;

    .icon-pencil {
        content: "\F040 "
    }
}

问题是：IE8不会重写像FontAwesome图标这样的伪元素而不对内容进行更改。 所以你需要强制改变内容。

我这样做的方法是检索FontAwesome设置的内容并添加空格。 不幸的是，我只能为每个需要更改样式的选择器重复相同的代码。