IE8 фиксированная позиция сверху и снизу ошибка изменения размера - PullRequest
Новая
       30

IE8 фиксированная позиция сверху и снизу ошибка изменения размера

4 голосов
/ 30 сентября 2011

Исходя из моего CSS, все браузеры, включая IE7, показывают мою нижнюю панель правильно и постоянно, 

.bottom-fixed {
    position: fixed;
    bottom: 0;
    margin-left: -235px;
    min-width: 1160px;
    max-width: 130em;
    width: 100%;
}

Однако в IE8 есть что-то странное.Если вы измените высоту окна браузера с помощью правого угла внизу (как вы можете изменить ширину и высоту окна одновременно), все будет хорошо.

Но если вы измените размер окна по высотезахватывая верхнюю или нижнюю часть окна вашего браузера, панель / div застряла в позиции, как если бы позиция была абсолютной, а не позиция: исправлено.

Есть идеи, как это исправить? (Использование Doctype для HTML5)

Ответы [ 4 ]

1 голос
/ 30 сентября 2011

Я не мог это исправить с помощью родительского решения с плавающей точкой из этого потока , упомянутого Умером .

Так что я исправил его с помощью простого сценария Javascript, который применяет положение: исправлено все время, когдаразмер окна изменяется.

HTML 

<!--[if IE 8 ]>
    <script type="text/javascript">
        $(window).resize(function () {
            ApplyPositionFixed();
        });
    </script>
    <![endif]-->

Javascript 

function ApplyPositionFixed() {
    // Check if element exists
    if ($("#bottom-bar-content").length) {
        $(".bottom-fixed").attr('style', 'position: fixed;');
        console.log("Window resized");
    }
    else {
        console.info("No element changes on Window resize");
    }
}

Однако.Я готов к лучшим решениям.

0 голосов
/ 11 марта 2015

для фиксированной позиции в IE 8 -, DOCTYPE очень и очень важно.

один из: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

или 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

или 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

или 

<!DOCTYPE HTML>

И очень и очень важно, чтобы те, которые будут в первой строке.

0 голосов
/ 31 января 2015

У меня была такая же проблема, но в моем случае было исправлено, что у родителя было position: relative. Как только я удалил это, эта проблема исчезла.

0 голосов
/ 04 мая 2014

Существует еще одно решение: установка height явно для родительского элемента. Например height: 1% или height: 100%.

...