Непрозрачность CSS не работает правильно в IE 6 / IE7 или IE8 в режиме совместимости - PullRequest
Новая
       35

Непрозрачность CSS не работает правильно в IE 6 / IE7 или IE8 в режиме совместимости

2 голосов
/ 13 сентября 2010

В следующем коде первое и второе изображения с якорями имеют ссылки, и на этих изображениях текст заголовка не скрывается (непрозрачность 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);

Ответы [ 4 ]

8 голосов
/ 13 сентября 2010

Это ошибка hasLayout .Вы можете исправить это, добавив zoom: 1 к своему div.wrapper объявлению CSS класса: 

div.wrapper{
    zoom: 1;
    position:relative;  
}

Исправьте в действии здесь .

2 голосов
/ 13 сентября 2010

IE до версии 8 не поддерживает официальную реализацию непрозрачности.Хотя официальной версией является 

opacity: [0..1]

реализация IE до версии 8 (и, следовательно, режим совместимости IE8, который действует как IE7), это 

filter: alpha(opacity=[0..100])
1 голос
/ 13 сентября 2010

попробуйте это CSS 

.transparent {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

и добавьте класс с JQuery 

$('div.description').each(function(){
    //...set the opacity to 0...
$(this).addClass('transparent')
...
1 голос
/ 13 сентября 2010

Попробуйте это как минимум для 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

...