Почему эти стили не видны в IE6 - PullRequest
Новая
       3

Почему эти стили не видны в IE6

0 голосов
/ 12 июня 2010

Учитывая следующую разметку 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.apartBox
{
    padding:12px;
    background: #FFFFFF;
    border: solid 1px #6182A3;
}
.browser
{
    background: #fff;
    border: solid 1px #0055E3;
    border-top: solid 12px #0055E3;
    border-bottom: solid 4px #7A99C5;
    padding:10px 10px 8px 14px;
    color: #333;
    font: 0.8em/1 arial;
    margin: 8px 20px;
}
.callout
{
     background: #EEF2F0;
     border: solid 1px #9CC7C0;
     padding:8px;
}

</style>
</head>

<BODY>

<div class="apartBox" id="subPopout" style="Z-INDEX: 2; WIDTH: 400px; POSITION: relative">
    <div id="upSubPop">
        <div class="callout" id="subDetails">
            <div class="browser">
            <span id="txtExample">Me afecta que digan que soy incapaz.</span>
            </div>
        </div>
    </div>
</div>

</BODY></HTML>

Стили из css .browser и .callout не отображаются в IE6, если я не удаляю стиль position:relative вручную из subPopout. Этот div генерируется автоматически из модального всплывающего окна, поэтому я, к сожалению, не могу коснуться этого стиля. Хорошо отображается в FF. Если я выберу .browser div с помощью мыши, он отобразится, когда я откажусь от него!

1 Ответ

1 голос
/ 12 июня 2010

Почему эти стили не видны в IE6

Короче говоря, потому что это IE6!

Может ли коробка иметь фиксированную высоту?

Если да, возможное решение было бы установить фиксированный размер элемента upSubPop. Например, если вы добавите: 

div#upSubPop{background:red;height:500px;}

к вашей таблице стилей, синие границы правильно отображаются в IE6.

Другой обходной путь - установить высоту <div class="browser" style="height:1px;" /> в 1 пиксель. В этом случае IE6 отображает элемент с соответствующей высотой в зависимости от содержимого (поэтому вы увидите все сообщение «Me afecta que digan que soy incapaz.» . Проблема в том, что реальные браузеры, такие как FF, будут тогда отображать все некорректно (точнее, сообщение будет перекрывать нижнюю границу). Таким образом, в этом случае вы можете использовать условный CSS , чтобы гарантировать, что ваш блок сообщений отображается так, как требуется как в реальных браузерах, так и в IE6.

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

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

...