CSS-спрайты работают в FF12, но не в IE8

Этот HTML-код...

<a href="LINK" class="testclass"></a>

...работает с этим CCS-кодом...

  a.testclass
  {
    background: transparent url(sprite.png) no-repeat -125px -671px;  
    display: block;
    width: 378px;
    height: 150px;
  }

... в Firefox 12, но не в Internet Explorer 8.

Код основан на этом вопросе об якорях, спрайтах и ​​CSS. Я нашел похожие вопросы, но поскольку этот код помещен в довольно сложную установку Drupal, я все еще надеюсь, что есть более простой способ решить эту проблему, чем просматривать код, чтобы найти какой-то «абсолютно позиционированный внешний div и некоторые стили меню», которые были ответственны за проблему в 2.

Спасибо за вашу помощь.

Изменить-1:

Это HTML-журнал Firebug:

<div id="banner-area">
  <div id="banner-left">
    <div class="region region-banner-left">
      <div>
        <a href="LINK">
          <img width="378" height="150" alt="ALTTEXT" src="IMAGE.GIF">
        </a>
      </div>
    </div>
  </div>
  <div id="banner-right">
    <div class="region region-banner-right">
      <p>
        <a class="testclass" href="LINK"></a>
      </p>
    </div>
  </div>
</div>

Ссылочный CSS-код:

#banner-area {
    width:756px;
    margin:0;
    padding:0;
    overflow:hidden;
}

#banner-left {
    width:378px;
    float:left;
    margin:0;
    padding:0;
}

#banner-right {
    width:378px;
    float:right;
    margin:0;
    padding:0;  
}

Первая картинка (IMAGE.GIF) отображается в FF и IE8. Второй ховер, который я хотел бы заменить спрайтом, отображается только в FF, но не в IE8.

Я включал и выключал прозрачность, как предложил Флориан, но безрезультатно. Я уменьшил размер изображения на 10 пикселей по ширине и высоте, но это тоже не помогло.


internet-explorer-8 css-sprites firefox-12
person MiBerG    schedule 04.06.2012    source источник
comment
Можно немного больше информации?! Должен работать и в IE8, за исключением прозрачного оператора. Вы пробовали удалить этот?   -  person Florian Rappl    schedule 04.06.2012
comment
Я добавил еще некоторые детали. Я проверил, как это выглядит в IE без прозрачного оператора, но это не помогло.   -  person MiBerG    schedule 06.06.2012

Ответы (2)


arrow_upward
1
arrow_downward

После двух дней потерянного времени я обнаружил, что IE8 не импортирует более 31 css-файла: http://drupal.org/node/228818?page=1

После повторного включения функции «оптимизировать css-файлы» в панели администрирования Drupal моей установки, которую я отключил, чтобы она не мешала моей разработке, все заработало нормально.

person MiBerG    schedule 07.06.2012

arrow_upward
0
arrow_downward

Этот вопрос связан с: Ошибка IE CSS: фон -color: Transparent ведет себя иначе, чем background-color: (любой другой цвет)

поэтому измените свой код на:

a.testclass
{
  background: url(sprite.png) no-repeat -125px -671px;
  display: block;
  width: 378px;
  height: 150px;
}

если вам действительно нужно стереть этот фоновый цвет (и, следовательно, установить его прозрачным), попробуйте другие настройки, такие как

a.testclass
{
  background-color: transparent;
}

Однако IE8 это не нравится, поэтому имейте в виду, что для IE8 есть некоторые исправления.

person Florian Rappl    schedule 04.06.2012