Question

更新

我开始逐行，这是第一个让浏览器显示内容的CSS样式。特别是，绝对定位似乎搞砸了......我不知道为什么。如果我删除它，或将其更改为亲属，那么事情就会出现，但显然不是在正确的地方。

#foo {
    height: auto;
    width: auto;
    margin-left: -500px;
    padding-top: 300px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    top: 0px;
}

根据要求，you can view the HTML markup here。但请注意，在页面加载期间会生成大量动态HTML，而不是在此处链接的HTML标记中。

我不太清楚为什么，但当我在我的<!doctype html>文件顶部包含HTML 5 doctype .html时，什么也没有显示。但是，使用Chrome的开发者工具检查源代码表明，所有内容都在DOM中，并且所有CSS属性都已应用。

咦！？怪异。

我开始调查并发现当我删除样式表时，即删除此行...

<link type="text/css" rel="stylesheet" href="css/new.css" />

......页面上显示的内容，但显然未应用样式。完整的css文件can be found here。

关于为什么会发生这种情况的任何想法;有关修复的建议？我很确定我的CSS都是有效的，但据我所知，W3C CSS Validator不能很好地验证CSS3

Answer 1

首先使用非常有限的css文件。意思是空白。

然后开始添加选择器直到它中断。一旦发生这种情况，您应该能够找到问题。

<强>更新
foo溢出包装。因此，它是完全隐藏的。

如果您在#wrapper标记中添加“border: solid 1px blue;”，您就会明白我的意思。

有关详细信息，请参阅：Percentage Height HTML 5/CSS

基本上，#wrapper标签上的最小高度设置没有做任何事情，因为它的父（#everything）没有设置高度。％高度工作的唯一方法是父元素定义实际高度。

在这种情况下，您必须添加以下内容：

html { height: 100%;}
body { height: 100%;}
#everything { height: 100%; ... }

然后你的包装将开始包装，你可以回到原来的方式。

这引出了我们最初的问题：为什么当doctype被淘汰时这会起作用？

答案是浏览器回归怪癖模式，负责为你扩展这些div。

Answer 2

尝试<!DOCTYPE html>而不是<!doctype html>

当我包含DOCTYPE时，页面没有显示任何内容...我的第100个问题？

更新

2 个答案: