Я режу прямо к делу.Вот вывод:
(теперь некоторый дополнительный код - только для чтения, если вы действительно хотите;))
Вот разметка:
<a href="/" id="logo_wrapper">
<span class="logo logo_normal"></span>
<span class="logo logo_hover"></span>
</a>
Вот CSS (сокращенно только для соответствующих материалов, для вашего удовольствия от чтения):
#logo_wrapper {
position:relative;
}
#logo_wrapper .logo {
display:block;
width:260px;
height:80px;
background-image:url(logo.png);
position:absolute;
}
#logo_wrapper .logo_normal {
background-position:0 0;
}
#logo_wrapper .logo_normal:hover {
opacity:0;
filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover {
background-position:0 -80px;
opacity:0;
filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover:hover {
opacity:1;
filter:alpha(opacity=100); /* THIS IS THE OFFENDER! */
}
Просто чтобы уточнить: я знаю, что могу сойти с одного span и простопереключение логотипа background-position при наведении курсора, но полный CSS имеет симпатичные переходы CSS3 для реальных браузеров, которые не должны прокручивать логотип вверх и вниз.
ОК, так что это PNG с 32-битным цветомглубина и, конечно же, прозрачность.Все хорошо в IE8, когда я вообще не использую альфа-фильтр или filter:alpha(opacity=0).Но с непрозрачностью, установленной на 100, простое использование фильтра приводит к тому, что IE8 сходит с ума и делает все не совсем прозрачные пиксели непрозрачными на 100%.Не то, чтобы это конкретное изображение выглядело так плохо с этим эффектом, но оно все еще раздражает: D.
Теперь я хорошо знаю, что IE8 печально известен проблемами прозрачного PNG, с проблемами, восходящими к IE6 и егоотвратительная сплошная голубая заливка прозрачных областей.Это можно исправить с помощью черной магии поведения IE.
Что можно сделать с IE8?