Проблема с непрозрачностью в IE8 - PullRequest
Новая
       26

Проблема с непрозрачностью в IE8

3 голосов
/ 06 января 2011

Я пытаюсь решить проблему, которая появляется в IE8.HTML очень прост: 

<div id="overlay">
</div>
<div id="imgcontainer">
     <div>
         <div id="source">
         </div>
      </div>
</div>

Когда я устанавливаю (используя jQuery) непрозрачность элемента "#source" с "0" в IE, я вижу фон #overlay, а не #imgcontainer> div, ноЗачем?Существует код JavaScript: 

$(function(){
    $("#source").css({
        opacity: "0",
    });
    $("#overlay").css({
        width: $(window).width(),
        height: $(window).height(),
        display: "block",
        opacity: "0.6"
    });

    $("#imgcontainer").css({
        zIndex: 2,
        position: "fixed",
        opacity: "1",
        left: "0",
        right: "0",
        top: "100px",
        display: "block"
    });
});

Вы можете попробовать живой пример на jsFiddle .
UPD:
После некоторых экспериментов я нашел решение,Это действительно проблема html \ css, поэтому я произвел рефакторинг кода и удалил тег jQuery.Представьте, что у нас есть такой html murk up: 

<body>
        <div id="d1">
            <div id="d2">
                <div id="d3">
                </div>
            </div>
        </div>
</body>

и стили CSS: 

body {
    background-color: #c8c8c8;
}

#d1 {
    background-color: #6c0922;
    width: 500px;
    border: 1px solid black;
    filter: alpha(opacity = 100);
}

#d2 {
    background-color: #146122;
    width: 350px;
    margin: 20px auto;
    border: 1px solid black;
}

#d3 {
    background-color: #0080c0;
    height: 100px;
    margin: 10px 65px;
    filter: alpha(opacity = 0);
    zoom: 1;
}

На первый взгляд все в порядке, мы ожидаем, что #d3 станет прозрачным, и мы можем видеть#d2 фон (темно-зеленый).Но не все так просто в IE7 \ 8.В IE мы можем видеть тело! (Серый) фон через #d2 и #d1.Вся магия в #d1 вы уже догадались.Когда мы удаляем filter: alpha(opacity = 100);, все работает правильно.

Вы можете спросить - но почему вы устанавливаете opacity = 1 для элемента, который сейчас непрозрачен?Я не знаю :).Может быть по какой-то причине вы должны использовать это поведение.Очень интересное и неожиданное поведение.

С этим примером можно поиграть в jsFiddle .

Ответы [ 2 ]

7 голосов
/ 15 февраля 2013

У меня была такая же проблема. Я много занимался поиском и чтением и обнаружил, что IE8 не использует CSS для прозрачности, которую используют другие браузеры. Вот мой CSS, который я использовал для IE8: 

#loading-div-background {
    display:none;
    position:absolute;
    top:0;
    left:0;
    background:gray;
    width:100%;
    height:100%;
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

Тем не менее, он все еще не работал с позицией: исправлено, но как только я установил позицию: абсолютная, она начала работать.

6 голосов
/ 06 января 2011

IE8 не поддерживает атрибут CSS opacity вместо этого вы должны использовать фильтр MS: 

    opacity: "0",
    filter: alpha(opacity = 50); /*change value to suit your needs*/

Это еще не все, хотя. Это работает только тогда, когда элемент позиционирован, к счастью, у вас уже есть, так что он будет работать. Для дальнейшего использования, если у вас не установлена ​​позиция, вы можете добавить zoom: 1 к селектору, и он будет работать в IE:)

...