Question

我在使用所有浏览器将页脚粘贴到页面底部时遇到问题。

我有以下文档结构：

<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">

我做错了什么？

Answer 1

使用代码中的DOCTYPE进行测试：

更改：

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

为：

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

为我修好了。

Answer 2

您需要让页脚停留在页面底部即。

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

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

注意：此解决方案被认为可以避免包装高度技巧/问题

Answer 3

除了使用错误的doctype之外，如上所述，更改或删除doctypes绝不是一种选择。从本质上讲，它是您告诉用于创建页面的浏览器的一组规则。你无法在中游或一时兴起改变规则。更改/删除doctype，更改规则。

永远不要，使用IE作为工作方式的参考。在最好的情况下，它在现代标准和合规性方面落后于所有其他人十年或更长时间。如果它在FF和Chrome中运行，那么您的标记很可能是正确的。

生活刚刚召集，我希望以后再提供更多信息。

帮助解决doctype问题

3 个答案: