div исчезает при изменении высоты браузеров Safari и Chrome - PullRequest
0 голосов
/ 04 ноября 2010

Посетите этот URL с помощью браузера Safari или Chrome: http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm Установите ширину окна браузера, чтобы убедиться, что высота зеленого поля больше, чем высота красного поля.Затем возьмите нижний край окна браузера и перетащите его на нижний край зеленого поля и поиграйте вокруг него.Вы заметите, что красное поле исчезает, когда нижний край окна браузера становится выше, чем нижний край зеленого поля.Затем продолжайте уменьшать высоту окна браузера, и снова появится красное поле.Вы заметите, что красное поле снова появляется точно в тот момент, когда нижний край окна браузера достигает нижнего края красного поля.Красное поле никогда не исчезает в других браузерах (IE, FF и Opera).Это ошибка в Safari или какая-то «фича»?В любом случае, я буду очень признателен, если кто-нибудь предложит мне обходной путь, чтобы избежать исчезновения красной рамки в Safari.Вот код вышеупомянутой страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>2 Column Fixed Liquid CSS Layout</title>
    <style type='text/css'>
    .wrapper
    {
        width: 100%;
        min-width: 300px;
    }
    .wrapright
    {
        float: left;
        width: 100%;
        background-color: Blue;
    }
    .right
    {
        margin-left: 160px;
        background-color: Lime;
    }
    .left
    {
        float: left;
        width: 150px;
        margin-left: -100%;
    }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="wrapright">
        <div class="right">
            LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH
            EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT.
        </div>
    </div>
    <div class="left">
        <div style="background-color: red;">
            LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, ...
        </div>
    </div>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 04 ноября 2010

Я не уверен, что это сработает для вашего окончательного макета, но на основании демонстрационного макета: кажется, что отрицательная 100% -ная маржа могла быть причиной проблемы.Поведение будет таким же, если вы уберете объявления с плавающей точкой и поля и сделаете позицию: абсолютную на .left div.Пока контейнер относительно позиционирован, я думаю, вы получите тот же конечный результат.

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