IE игнорирует CSS, хотя у него более высокая специфичность

Question

У меня есть кнопка css для раздвижных дверей. Я использую метку кнопки и два внутренних пролета.

У меня есть это, чтобы указать фоновое изображение обычной кнопки;

button span {
 background: url(button_right.png) no-repeat top right;
}

Какой цвет кнопки по умолчанию. Затем у меня есть «серая» кнопка (я даю кнопке класс «серая»).

button.gray span {
 background: url(button_right_gray.png) no-repeat top right;
}

По некоторым причинам. IE (8) не нравится это и игнорирует серый css, сохраняя исходное изображение в качестве фона. Тем не менее, следующий «hover» css работает в IE;

button.gray:hover span span {
      color: #6c6c6c;
      background-position: left -29px;
  }

Я думал, что «button.gray span» обладает большей специфичностью, чем просто «span span» (он есть во всех других браузерах).

EDIT: Итак, я обнаружил проблему. В моем объявлении CSS у меня было следующее

button.gray span,
  button:disabled span {
background: url(button_right.png) no-repeat top right;
}

Если я удаляю кнопку: отключенный диапазон из списка объявлений, он работает!

Answer 1

IE не поддерживает :disabled селектор псевдокласса . Поведение IE заключается в том, чтобы пропустить все правило, когда он встречает недопустимый или нераспознанный селектор (который на самом деле соответствует спецификации - даже если не поддерживается :disabled, во-первых, нет!), Так что объяснил бы, что вы видите.

Answer 2

Вы пробовали смотреть на само изображение?Используя цвета вместо изображений, ie8, кажется, отображает штраф класса .gray:

http://screencast.com/t/YzA4MGEx

Answer 3

Согласно моему редактированию;

Хорошо, я обнаружил проблему. В моем объявлении CSS у меня было следующее

кнопка. Серый, кнопка: отключенный интервал { background: url (button_right.png) без повтора вверху справа; }

Если я удалю кнопку: отключенный диапазон из списка объявлений, он будет работать! В чем проблема IE с кнопкой: отключен, поскольку он полностью прекращает прослушивание всей декларации?

Answer 4

Вы пытались добавить! Важно для этого? т.е.

    button.gray span {
      background: url(button_right_gray.png) no-repeat top right !important;
    }