Html 关于doctype问题的帮助_Html_Css_Doctype_Quirks Mode

Html 关于doctype问题的帮助

html css

Html 关于doctype问题的帮助,html,css,doctype,quirks-mode,Html,Css,Doctype,Quirks Mode,在所有浏览器中，我都无法将页脚粘贴到页面底部我的文件结构如下： <html> <head> </head> <body> <div id="wrapper"> <div id="header"> <ul> <li>home</li>

在所有浏览器中，我都无法将页脚粘贴到页面底部

我的文件结构如下：

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

当不使用任何文档类型时，页面将按照我在Chrome和Firefox中的预期呈现。然而，在IE8中，列表项选项卡位于单独的行上

当我添加XHTML doctype时，页面在IE8中正确呈现，但在IE8、Chrome或Firefox中，页脚不在页面底部绘制，即页脚位于菜单栏的正下方

doctype示例：

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

我做错了什么？

使用代码中的

DOCTYPE

进行测试：

更改：

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

致：

为我修复它。

你需要让页脚留在页面底部 i、 e

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

除了使用错误的doctype之外，正如我前面提到的，更改或删除doctype从来都不是一个选项。本质上，这是一组规则，告诉浏览器您正在使用这些规则创建页面。你不能中途改变规则，也不能一时兴起。更改/删除doctype，更改规则

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

生活刚刚打来电话，我希望以后能提供更多信息。

我不清楚你想要实现什么目标。也许你应该提供更多的细节。使用粘性页脚将页脚放在页面底部。第一个无法解决问题的即时观察。您的doctype不正确。它适用于仅作为XML的站点，但我怀疑您是否在这样做。将其更改为XHTML1版本。我认为您刚刚发现了怪癖模式。关于doctype，绝对正确！只是关于浏览器的一个补充：不幸的是，大多数“正常”的人都使用IE（也有6个！）。因此，作为web开发人员，我们必须在IE上进行大量测试too@steweb-我没有说不要在IE中测试。我说你不能相信它能做任何正确的事情，你不能用它作为事情如何运作的参考。我从来没有用IE作为参考？这是一个糟糕的浏览器。为反馈喝彩。然而，当我注意到这个问题时，我做了测试。

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

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

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

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