應用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設置的內容並添加空格。 不幸的是，我只能為每個需要更改樣式的選擇器重復相同的代碼。