Помощь с вопросами типа документа - PullRequest
Новая
       31

Помощь с вопросами типа документа

2 голосов
/ 12 января 2011

У меня проблемы с тем, что мой нижний колонтитул придерживался нижней части страницы во всех браузерах.

У меня следующая структура документа: 

<html>
    <head>
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                <ul>
                    <li>home</li>
                </ul>
            </div>

            <div class="expander"></div>
        </div>

        <div id="footer" class="expander">
        </div>
    </body>
</html>

Соответствующий CSS: 

body
{
 margin: 0;
 height: 100%;
}

#wrapper
{
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -116px; 
}

.expander
{
 height: 116px;
}

#footer
{
 width: 100%;
}

#header ul
{
 list-style: none outside none;
 clear: both;
 margin: 0;
}

#header li
{
 margin: 0;
 margin-right: 20px;
 padding: 0;
 display: inline-block;
 height: 85px;
 padding-top: 20px;
 margin-bottom: -20px;
}

При использовании без какого-либо типа документа страница отображается так, как я намереваюсьв Chrome и Firefox.Однако в IE8 вкладки элементов списка расположены на отдельных строках

Когда я добавляю тип документа XHTML, страница корректно отображается в IE8, за исключением того, что нижний колонтитул не отображается внизу страницы в IE8, Chrome или Firefoxто есть нижний колонтитул находится прямо под строкой меню.

Пример doctype: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Что я делаю не так?

Ответы [ 3 ]

2 голосов
/ 12 января 2011

Тестирование с DOCTYPE в коде:

Изменение: 

body
{
 margin: 0;
 height: 100%;
}

на: 

html, body
{
 margin: 0;
 height: 100%;
}

исправляет это для меня.

0 голосов
/ 12 января 2011

В дополнение к использованию неправильного типа документа, как я уже упоминал выше, изменение или удаление типа документа никогда не допускается.По сути, это набор правил, которые вы сообщаете браузеру, который используете для создания страницы.Вы не можете менять правила в середине или по прихоти.Измените / удалите тип документа, измените правила.

Никогда, НИКОГДА не используйте IE в качестве справки о том, как все работает.В лучшем случае, это десятилетие или более отстает от всех других в современных стандартах и ​​соответствии.Если он работает в FF и Chrome, то ваша разметка, скорее всего, правильная.

Жизнь только что позвонила, и я надеюсь дать больше информации позже.

0 голосов
/ 12 января 2011

Вы должны оставить нижний колонтитул внизу страницы. т.е. 

body, html{
    margin:0;
    height:100%;
}

#footer{
    position:absolute;
    bottom:0px;
    width:100%;
}

Примечание: считается, что это решение позволяет избежать уловок / проблем с высотой обертки

...