CSS: непрозрачность - Div не отображается в IE7?

Question

Я создал оверлей, который я использую для отображения при выполнении запросов AJAX. В Firefox это прекрасно работает! Но в IE7 я не вижу Div.

Мой div - это первый элемент после Body

<div id="overlay">
   &nbsp;
</div>

и мой css здесь

#overlay {
z-index:1000;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
display:none;
}

Я думаю, что это может быть связано с определением размера, так как я поместил какой-то текст в div, и я не вижу его в IE7, но я делаю это в Firefox.

Кто-нибудь знает, где это не работает, я немного растерялся: -)

Я попытался удалить дисплей: нет, и он такой же, и я также вставил высоту: авто, но все равно без удовольствия.

Я использую jquery, чтобы показать и скрыть это так, но это не проблема, когда я удалил Display: none, и я не вижу div, который должен быть поверх остального содержимого

 $("#overlay").show();

Есть идеи?

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

Answer 1

, поскольку ваш div расположен в абсолютном значении, вы должны указать высоту (отличную от auto).Это можно сделать, объявив высоту: от 100% до #overlay, затем также html, body { height: 100% } при открытии оверлея и html, body { height: auto } при закрытии оверлея);

Другой (лучший) способ - динамически рассчитать высоту элементов тела с помощью javascript (например, document.body.offsetHeight), а затем присвоить #overlay как высоту

document.getElementById('overlay').style.height = document.body.offsetHeight + 'px';

это будет записано в вашем фрагменте jQuery как

$("#overlay").height($('body').height()).show();

Answer 2

Попробуйте следующий дополнительный CSS:

#overlay {
    zoom: 1;
}