<style> <head> 之外的页面渲染答案

【问题标题】：<style> Outside of <head> Rendering on Page<style> <head> 之外的页面渲染
【发布时间】：2011-09-17 07:54:24
【问题描述】：

使用来自 Paul Irish 和 gang 的 HTML5BoilerPlate 模板（尽管我并不是说这与它有任何关系），并且我在页面上呈现的标签内有一些样式。如果我将它们移到里面，它们就会按应有的方式工作。我以前这样做是为了进行一些快速编辑，但从未见过页面上呈现的样式。这是头部代码的示例：

<!doctype html public "*">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width"> 
<title>Title</title>

<meta name="bitly-verification" content="xxxxxxxxxxxx" />
<meta name="google-site-verification" content="xxxxxxxxxxxxx" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" media="all" href="css.css" />

</head>

<body>
    <div id="container">
        <style>
        ...
        </style>
    </div>
</body>

但是，我们发现取出容器 div 可以让样式标签起作用，并且它们不再显示在呈现的页面中。我们还没有弄清楚为什么，这很麻烦。有没有人遇到过这个问题？或者任何人都可以解释为什么会发生这种情况？

不是交易破坏者，更多的是知识问题。谢谢。

**编辑：#selector > * 是罪魁祸首 - 啊！ *

【问题讨论】：

您是说外部样式表中的样式工作正常，但嵌入的样式在网页上显示为文本？
抱歉，我再次编辑了帖子以准确反映正在发生的事情。样式表工作得很好，但嵌入的样式标签不起作用，也会在页面上呈现。但是，如果我们取出容器 div，样式会按预期工作。
你能用http://jsbin.com/复制这个吗？您可以在<style></style> 中包含您的css.css 文件，但将其保留在<head> 中:)

标签： css html styles boilerplate

【解决方案1】：

W3Schools 声明：

样式元素始终位于头部内部。 - Reference

将样式标签放在正文中（无论出于何种原因）会带来一些未定义的行为，这是有道理的。

【讨论】：

好吧，您可能期望它会“带有一些未定义的行为”，但实际上它在“所有浏览器”中都能正常工作。
实际上，这是一个大脑放屁...由于某种原因，我忘记了容器元素上的全局选择器，所以所有子元素都是display: table-cell; DOH！无事生非！对不起，伙计们，谢谢你取笑我。
您的报价以及您链接到的网站与 W3C 毫无关系。