Почему этот элемент, установленный в `height: 100%`, не работает в этом примере в IE7?

Question

Я настроил эту скрипку , чтобы показать, как все браузеры отображают красные фрагменты.

Как ни странно, IE7 отрисовывает это прекрасно (самостоятельно).

Однако,У меня есть эффект тени на новом сайте (который работает так же, как красные полосы), который работает в Firefox, Safari и IE8.

Клянусь, я использовал этот же метод бесчисленное количество раз раньше, и он работал вIE7.

Вот как это выглядит в IE7.Полосы не растут до нужной высоты (мне показали это инструменты IE1 developer ).Они не просто не повторяют фоновое изображение.

IE7 http://alexanderdickson.com/hosted/stackoverflow.com/ie7-css-height-100.png

Сайт также доступен здесь для просмотра.Я использую представление совместимости IE8, которое, как я понимаю, не является строго 1: 1 в IE7, но я в соответствии с NetRender , это также происходит в IE7.

Может кто-нибудь, пожалуйста, сообщитемне, что я делаю не так?

Спасибо!

Answer 1

Я не уверен, почему вы применили бы свои тени таким образом. Как я обычно это делаю, выровняв центр по более широкому контейнеру (включая ширину левой / правой тени) (в данном случае это ваш div #mainContainer, затем установите повторяющийся у фона (это тень - всего пара). пикселей в высоту). Затем я укажу еще один div внутри этого контейнера, меньшую ширину, по центру, который будет содержать весь текст.

Редактировать: только что заметил вашу скрипку. Я думаю, что это может не работать в этом случае из-за конфликтов CSS, возможно из таблицы стилей osCommerce? Я постараюсь заглянуть глубже .. хм

РЕДАКТИРОВАТЬ 2: Хорошо, я проследил это к этому конкретному коду в stylesheet.css

#login-link,
#logout-link {
    position: absolute;
    bottom: -20px;
    right: 50px;
    background: #333;
    padding: 5px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 100;
    font-weight: bold;
}

<a href="http://174.121.189.41/~wwwgolf/login.php" id="login-link">Login to GolfBallBusters</a>

Проблема заключается в вашем абсолютном позиционировании этого элемента. Удаление стилей исправляет ваши проблемы с тенью. :)

РЕДАКТИРОВАТЬ ИСПРАВЛЕНИЕ: Это должно это исправить. Или, по крайней мере, на моей урезанной версии макета вашего сайта. Измените #user и # login-link на следующее:

#user {
    float: right;
    color: #f90;
    position: relative; /* addition */
}

#login-link,
#logout-link {
    position: absolute;
    top: 31px; /* addition */
    /*bottom: -20px; REMOVED */
    right: 50px;
    height: 15px; /* addition */
    white-space: nowrap; /* addition */
    background: #333;
    padding: 5px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 100;
    font-weight: bold;
}

fix2:

Изменение

#user-options .bottom-shadow {
    display: block;
    width: 100%;
    height: 7px;
    position: absolute;
    bottom: -7px;
    #bottom: -5px;
    left: 0;
    background: url(images/layout/shadow-bottom.png) repeat-x;
    z-index: 50;
}

TO

.bottom-shadow {
    width: 100%;
    height: 7px;
    margin-top: -10px;
    background: url(images/layout/shadow-bottom.png) repeat-x;
}

А ваш HTML-макет должен быть:

    <div id="user-options">
        <div id="choose-your-country">
            <p>Choose your country &gt; </p>         
        </div>

        <div id="user"></div>

        <div id="current-locale">Golf Ball Busters - AU</div>
        <br class="clear">
    </div>
    <div class="bottom-shadow"></div>

Заметил, что я изменил bottom-shadow на элемент div и переместил его из <div id="user-options">.

Answer 2

попробуйте дать #mainContainer height: 100%