проблема наследования CSS нескольких классов в IE - PullRequest
Новая
       25

проблема наследования CSS нескольких классов в IE

6 голосов
/ 19 мая 2011

У меня есть класс с именем ".spr" (для спрайта изображения) и много классов, которые изменяют атрибуты width, height и background-position для отображения различных частей спрайта.

У меня также есть классы ".on" для переключения между изображениями, появляющимися в состоянии "включено" или "выключено".

Проблема в том, что в IE класс «on», который должен быть связан с определенным классом, применяется к кнопке, у которой нет этого связанного класса (но другого).

Скриншот:

enter image description here

CSS: 

.spr.burst.been {background-position: -241px -89px;
  .spr.burst.on {
    background-position: -301px -89px !important; }

  .spr.radiobutton {background-position: -250px -249px; }
    .spr.radiobutton.on {
background-position: -250px -218px;
      border: 3px dashed red; }

Как видите, IE9 интерпретирует класс 

.spr.radiobutton.on
* *, Как тысяча двадцать-один * * тысяча двадцать две 
.spr.on

и, поскольку это происходит позже в таблице стилей, переопределяет свойства 

.spr.burst.on

хотя 

.spr.burst

не имеет класса 

.radiobutton

Как правильно применить эти составные стили в IE?

1 Ответ

5 голосов
/ 19 мая 2011

Если ваша страница не имеет правильного объявления типа документа, IE9 перейдет в режим причуд и будет обрабатывать цепочечные селекторы классов точно так же, как IE5 / IE6: он будет читать только последний класс и применять правила соответственно.

В результате селектор .spr.radiobutton.on действительно интерпретируется как просто .on (а не .spr.on), переопределяя предыдущее правило, которое, по его мнению, имеет только селектор .on.

Просто дайте вашему документу объявление типа документа, и IE9 будет вести себя как положено.

...