IE8 ошибка? div с высотой, позиция: абсолютная, и непрозрачность отображается неправильно - PullRequest
Новая
       5

IE8 ошибка? div с высотой, позиция: абсолютная, и непрозрачность отображается неправильно

3 голосов
/ 06 мая 2011

У меня проблема с CSS в IE8. Полная высота .test_div не отображается, когда я добавляю прозрачность в #header. Но полная высота .test_div покажет, когда я уберу непрозрачность.

Это работает в Chrome и Firefox, но не в IE8. Я что-то не так делаю?

Спасибо! :)

Код также здесь: http://jsfiddle.net/VPkXu/

HTML: 

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <div id="header">
            <div class="test_div">test square</div>
        </div>
    </body>
</html>

CSS: 

#header {
    position:absolute;
    z-index:10;
    height:100px;
    width:300px;
    background: #888;
    /* remove the lines below, the full height of .test_div will be visible (IE8)*/
    opacity: 0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter:alpha(opacity=70);
}

.test_div {
    background:#CCC;
    height:500px;
    width:200px;
}

1 Ответ

0 голосов
/ 06 мая 2011

Самый простой способ - извлечь этот div из заголовка # 

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <div id="header"></div>
        <div class="test_div">test square</div> 
    </body>
</html>

и применить позицию и z-index к .test_div 

.test_div {
    z-index: 11;
    position:absolute;
}

см. http://jsfiddle.net/7aXJD/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...