Не могу установить тег привязки на [отключен] в IE

Question

У меня есть следующий код CSS. button.png - это изображение, где 3 состояния кнопки вставляются ветеринарно, поэтому я просто перемещаю изображение в CSS.

a.button
{
    background-image: url(button.png);
    background-position: 0px 0px;
    width: 100px;                                            
    height: 30px;
    display: block;
    background-repeat: no-repeat;
    text-indent: -9999px;
}
a:hover.button
{
    background-position: -100px 0px;
}
a.button[disabled]
{
    background-position: -200px 0px;
    cursor:default;
}

Я положил это в HTML

<a href="#" class="button" disabled="disabled"></a>

В Chrome все ок. IE не показывает отключенное изображение.

Answer 1

IE 6 не может обрабатывать селекторы атрибутов. Источник

IE 7 и 8 должны быть в состоянии обрабатывать a.button[disabled=disabled].

Для полной совместимости вам нужно добавить класс к отключенной кнопке:

a.button[disabled],
a.disabled
{
...
}

<a href="#" class="button disabled" disabled="disabled"></a>

Answer 2

Если вы можете предполагать, что у ваших пользователей будет JavaScript, вы можете использовать ie7.js для предоставления отсутствующих селекторов http://dean.edwards.name/IE7/

Answer 3

Какие IE - селекторы атрибутов не поддерживаются в IE6, а в остальных вам нужен тип документа.