当我包含 DOCTYPE 时，页面不显示任何内容……我的第 100 个问题？答案

【问题标题】：Page doesn't display anything when I include the DOCTYPE... my 100th question?当我包含 DOCTYPE 时，页面不显示任何内容……我的第 100 个问题？
【发布时间】：2011-04-20 22:07:32
【问题描述】：

更新

我开始逐行进行，这是第一个让浏览器显示内容的 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 不在此处链接的 HTML 标记中。

我不太清楚为什么，但是当我在 .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 验证器并不能很好地验证 CSS3

【问题讨论】：

您是否尝试过重新设置样式表顶部的间距（即 html、body、div、span、p、img... 等）而不是使用星号？不确定这是否是问题所在，但我又不精通 html5 怪癖。
不...我删除了通用选择器，但它没有帮助。我还尝试使用 Eric Meyer 的 CSS 重置。没有帮助
当您使用它时，将@CHARSET 更改为@charset。
那也没有帮助。啊。谢谢你的建议。我将尝试 1 比 1
我们有机会看看您的 html 头部标记吗？

标签： html css doctype

【解决方案1】：

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

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

更新：
foo 是溢出的包装器。因此它是完全隐藏的。

如果您将“border: solid 1px blue;”添加到#wrapper 标签，您就会明白我的意思了。

欲了解更多信息，请参阅：Percentage Height HTML 5/CSS

基本上，#wrapper 标签上的 min-height 设置没有做任何事情，因为它的父级 (#everything) 没有设置高度。 % heights 起作用的唯一方法是父元素定义一个实际高度。

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

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

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

这将我们引向最初的问题：为什么当 doctype 被拉出时这会起作用？

答案是浏览器退回到怪癖模式，该模式负责为您扩展这些 div。

【讨论】：

@Chris...你是对的。我将#foo 的定位更改为fixed 似乎达到了相同的效果，但是当我调整窗口大小时，min-width 属性不适用。有什么建议吗？
@Chris... 实际上，只需将 #wrapper 更改为可见溢出即可解决问题，但您认为这是一个好的解决方案吗？
@Hristo：这是一个完全不同的问题。 min-width 似乎在我整理的只有#everything、#wrapper 和#foo 标签的简短示例中起作用。
@Hristo：我想你可能想弄清楚为什么#wrapper 没有通过包装整个东西来做你想做的事情。
如果没有固定尺寸，隐藏溢出将始终截断并产生此结果。

【解决方案2】：

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

【讨论】：

然后，如果没有看到 HTML 页面，我会假设它是这样的：#symbols-block [class *="-symbols"] { display: none; } 如果不是这样，那么我会遵循 Chris Lively 的建议，但我可能会先删除设置 display: none; 的 CSS