html - IE8 在应用 css 类后无法正确设置 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 不会在不改变内容的情况下重绘伪元素。

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

Answer 2

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

你可能知道微软说disabledCSS3 伪类只适用于 IE9及更高版本。否则，问题如何在 IE8 中设置禁用文本区域的样式？提出了一些解决方案。