Непрозрачность CSS не работает правильно в IE 6 / IE7 или IE8 в режиме совместимости
Вопрос
В следующем коде первые и второвые изображения с анкерами имеют ссылки и в этих изображениях текст подписи не скрывает (непрозрачность 0) на странице нагрузки в IE 6 / IE7 или IE8 в режиме COMP. Все остальные изображения работают нормально, но мне нужно, но ссылки в них.
Вот код в Jsfiddle.
FF работает нормально, а IE8 в обычном режиме тоже в порядке
Я бы опубликовал весь код здесь, но его довольно долго, и у меня были проблемы с этим.
Добавлен код JS
$(window).load(function(){
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'inline-block');
});
$('div.wrapper').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class descriptio
//and show it using fadeTo
//$(this).children('.description').show();
$(this).children('.description').stop().fadeTo(500, 0.7);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
});
Кажется, это не так ...
$(this).css('opacity', 0);
Решение
Это haslayout bug.. Отказ Вы можете исправить это, добавив zoom: 1
на ваш div.wrapper Декларация класса CSS:
div.wrapper{
zoom: 1;
position:relative;
}
Исправить в действии здесь.
Другие советы
Т.е. до версии 8 не поддерживает официальную реализацию непрозрачности. Пока официальная версия
opacity: [0..1]
IE внедрение до версии 8 (и, следовательно, режим совместимости IE8, который действует как IE7), это
filter: alpha(opacity=[0..100])
Попробуйте их по крайней мере, например, IE7 и 8:
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
$(this).css(
{
'opacity': 0,
'-ms-filter':"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)",
'filter': 'alpha(opacity=50)'
});
Обновление отредактировано для использования его кода из JSBIN
Попробуйте это CSS
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
и добавить класс Whith jQuery
$('div.description').each(function(){
//...set the opacity to 0...
$(this).addClass('transparent')
...