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

【问题标题】：IE8 fails to properly style font-awesome icon after applying css classIE8 在应用 css 类后无法正确设置 font-awesome 图标的样式
【发布时间】：2014-07-19 00:21:28
【问题描述】：

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 下，当我将禁用的类添加到 linkButton 时，图标铅笔跨度继续被涂成红色，而不是灰色。这种事情有简单的解决办法吗？

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

【问题讨论】：

标签： html css internet-explorer-8

【解决方案1】：

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

你可能知道微软说disabled CSS3 伪类only works in IE9 及以上。否则，问题How do you style disabled textarea in IE8? 提出了一些解决方案。

【讨论】：

【解决方案2】：

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

你可以用那个 hack 解决这个问题...

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 设置的内容并添加一个空格。不幸的是，我只能为需要更改样式的每个选择器重复相同的代码。

【讨论】：