IE 7 - когда непрозрачность установлена ​​для DIV с абсолютной позицией, дочерние элементы исчезают - PullRequest
Новая
       16

IE 7 - когда непрозрачность установлена ​​для DIV с абсолютной позицией, дочерние элементы исчезают

1 голос
/ 09 сентября 2011

У меня есть div с положением, установленным в absolute, и несколько div внутри него.Как только я добавляю фильтр непрозрачности к этому div, даже если opacity установлен на 100, дочерние div исчезают в IE7.

То же самое происходит, если я изменяю непрозрачность через jQuery даже без абсолютной позиции.

Кто-нибудь знает исправление?

Заранее спасибо

Пример 

<style type="text/css">

#wrap {
opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(Opacity=50); -moz-opacity: 0.50; -khtml-opacity: 0.5;
position:absolute;
}
#sub1 {
position:absolute;
width:200px;
height:200px;
background-color:#F00;
}

</style>

<div id="wrap">
    <div id="sub1"></div>
</div>

Если обтекание имеет непрозрачность и абсолютную позицию, sub1 невидим в IE7

Второй сценарий: 

#wrap {
    position:absolute;
    width:500px;
    height:500px;
    color:#fff;
    filter: alpha(Opacity=100);
}
#sub1 {
    position:absolute;
}
#sub2_bg {
    width:500px;
    height:500px;
    background-color:#000;
    position:absolute;
    filter: alpha(Opacity=50);
}
#sub2_text {
    position:absolute;
}
</style>

<div id="wrap">
    <div id="sub1">
       <div id="sub2_bg"></div>
       <div id="sub2_text">sample text</div>
    </div>
</div>

В этом сценарии текст «образец текста»Внутри sub2_text альфа-прозрачность составляет 50%, как только у обертки есть фильтр, даже если его непрозрачность = 100.Очевидно, что я мог бы удалить альфа (непрозрачность = 100), но та же проблема возникает, когда я анимирую непрозрачность переноса до .5 и обратно до 1, потому что тогда div получает фильтр.Я заметил, что только части, у которых есть альфа-прозрачный элемент div ниже, имеют эту проблему, если текст был больше, чем sub1_bg, будут затронуты только те части, которые находятся над sub1_bg.Опять же, только в IE 7.

Было бы неплохо, если бы кто-то мог показать мне исправление для этого тоже.Спасибо.

1 Ответ

1 голос
/ 09 сентября 2011

Причина в том, что #wrap больше не содержит ваш элемент с абсолютным позиционированием. Вы должны указать ширину / высоту, как показано ниже. 

#wrap { 
  width:500px;
  height:500px;
}

Раньше #wrap не обрезал этот контент, но когда вы применили фильтр, он обрезал этот контент. Это как застревание переполнения: спрятано на вашем # wrap.

Обновление: Чтобы исправить это, установите строгий тип документа на своей странице. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Кроме того, добавьте следующее в CSS для своих детей, чтобы наследовать предыдущий стиль фильтра с непрозрачностью 50%. 

filter:inherit;
...