<风格><头部>之外页面渲染

发布于 2024-11-15 17:37:10 字数 1179 浏览 5 评论 0原文

使用 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> * 是罪魁祸首 - 啊! *

Using the HTML5BoilerPlate template from Paul Irish and gang (although, I'm not saying that has anything to do with it) and I have some styles inside tags that are rendering on page. If I move them inside the they work as they're supposed to work. I've done this before to do some quick editing and have never seen the styles rendered on the page. Here's a sampling of the head code:

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

However, we've found that taking out the container div allows the style tags to work and they no longer show up in the rendered page. What we haven't figured out is why and that's bothersome. Has anyone ever had this issue? Or can anyone give insight as to why this might happen?

Not a deal breaker just more a matter of knowledge. Thanks.

**EDIT: #selector > * was the culprit - aargh! *

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

落花随流水 2024-11-22 17:37:10

W3Schools 声明:

样式元素始终位于 head 部分内。 - 参考

将样式标签放在正文中是有意义的(无论您出于何种原因)这样做)会带来一些未定义的行为。

W3Schools state that:

The style element always goes inside the head section. - Reference

It makes sense that putting the style tag in the body (for whatever reason you might be doing that) would come with some undefined behaviours.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文