html - 在不同的网站上体验不同的 CSS 结果？

Question

我试图在 DIV 中垂直对齐 span-tag。我在 JSFiddle 上有一个工作示例，但完全相同的 CSS 和 HTML 在我自己的网站上不起作用。

#drop_zone {
    width: 500px;
    outline: 1px solid #E1E1E1;
    margin: 0 auto;
    height: 200px;
    line-height: 200px;
}

#drop_zone span {
    display: inline-block;
    line-height: 19px;
    vertical-align: middle;
}

<div id="drop_zone"><span>Drag file here.<br />Your file will <strong>not</strong> be uploaded!</span></div>

现在，它可以在 JSFiddle 和 Stackoverflow 上运行，但为什么它不能在我自己的站点上运行？您可以在此处查看结果:http://snorlax.org/stackoverflow.html

如果您查看源代码，您会发现它们是完全相同的代码。到底发生了什么事？

Answer 1

您的文档缺少 Doctype，因此您触发了 Quirks mode .您尝试使用的功能只能在标准模式下正常工作。添加文档类型。使用 validator .