Проблема при попытке добавить плавающий эффект в нижний колонтитул в IE - PullRequest
0 голосов
/ 09 июня 2010

Я пытаюсь поместить нижний колонтитул в нижней части браузера независимо от длины содержимого.Панель нижнего колонтитула всегда должна быть видна пользователю и должна находиться на верхнем слое.Ниже приведен мой код:

<html>
<head>
    <style type="text/css">
        #wrapper {
            width: 910px;
            margin: 0 auto;
            padding: 0px 20px 50px 20px;
            text-align: left;
        }
        #footer-wrapper {
            -moz-background-clip:border;
            -moz-background-inline-policy:continuous;
            -moz-background-origin:padding;
            bottom:0;
            clear:both;
            font-size:11px !important;
            left:0;
            position:fixed;
            white-space:nowrap;
            width:100%;
            z-index:8000;
        }
    </style>
    <script>
        var counter = 0;
        function addContent(ctr)
        {
            document.getElementById(ctr).innerHTML=document.getElementById
            (ctr).innerHTML+"
            dynaContent"+counter; counter++;
        }
    </script>
</head>
<body>
    <div>
        <div><input type="button" onclick="addContent('wrapper')" value="Add dynaContent" /></div>
        <div id="wrapper" style="color:#FFFFFF; background-color: #111111;"> STATIC TEXT - HEADER-WRAPPER </div>
        <div style="color:#FFFFFF;background-color: #555555;">STATIC TEXT - FOOTER-WRAPPER</div>
    </div>
</body>
</html>

Он отлично работает в Mozilla Firefox и дает ожидаемые результаты, но в IE строка нижнего колонтитула всегда торчит прямо под заголовком.

Заранее спасибо, Шайлеш.

1 Ответ

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

Прежде всего, в вашей оболочке нижнего колонтитула отсутствует атрибут id: <div id="footer-wrapper" ...>

Тогда это зависит от того, какую версию IE вы используете:

  • Он вообще не работает с IE6 (не понимает position: fixed)
  • Для IE7 и IE8 position: fixed работает только, если вы переведете его в стандартный режим . Самый простой способ сделать это, это вставьте <!doctype html> в качестве первой строки (это должна быть самая первая строка, без комментариев или чего-либо перед ней)

Однако существуют другие методы создания нижнего колонтитула, см., Например, Как заставить нижний колонтитул оставаться внизу веб-страницы?

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