6

我正在使用 CMS,显然它有一个错误,不允许我向<head>博客文章添加任何内容。它将所有内容插入到主体中,在大多数情况下可以正常工作,但在这样的代码实例中:

<style type="text/css">
 .slideshow img { display: none }
 .slideshow img.first { display: block }
</style>

如果将这种类型的代码放在<body>所有主要浏览器的标签中,会运行吗?(IE8+、Firefox、Chrome 和 Safari。)通常它总是在<head>页面中。

注意:这似乎在 FF 15 中有效,但我不确定其他浏览器。

4

5 回答 5

10

正文中有样式标签是无效代码。

每个浏览器都会尝试以一种有意义的方式使用无效代码。某些浏览器似乎无论如何都使用样式规则,但您不能依赖于所有当前和未来浏览器的行为。另一个也很有意义的行为是忽略无效的样式标签。

请注意,即使在同一个浏览器中,行为也可能会有所不同,具体取决于页面是以标准兼容模式还是怪癖模式呈现。在标准遵从模式(这是首选模式)下,浏览器往往更加严格并忽略无效代码,而不是试图猜测作者对代码的意图。


2014 年更新:

在 HTML5 中,您可以在 body 元素中使用样式标签。在任何不支持 HTML5 的旧浏览器中,或者如果您没有 HTML5 文档类型,它仍然是无效代码。

于 2012-07-21T23:22:59.303 回答
3

Javascript 是另一个想法,因为<script>元素可能出现在正文中。当然,这取决于用户是否允许使用 Javascript。

我看不到另一种选择(当然,除了style到处都是属性)。

或者只是在体内使用它,即使这会让@Cole 大喊大叫?当script元素在 HTML 3.2 中作为占位符引入时,规范说“用户代理应该隐藏这些元素的内容”。所以至少有一些希望所有浏览器都会隐藏它(即使他们不解释 is as style)。

于 2012-07-21T23:13:46.207 回答
2

如果您可以修改由 CMS 加载的 CSS 文件(即主题类型样式表),则将该代码放在 CSS 文件的底部并使用注释来表示自定义样式(供您将来参考),或使用CSS Import使用主题搭载 CSS 的规则。

于 2012-07-21T23:14:27.310 回答
2

style是的,即使在内部,浏览器也会识别并应用元素body。他们甚至“向后”应用它,即您可以对出现在元素之前的style元素进行样式设置。

这很容易检查出来,但更难预测未来。您并不孤单(在 CMS 中存在这样的限制是相当普遍的——不是真正的错误,而是故意的限制),并且有很多 Web 内容必须使用这样的功能。因此,浏览器不太可能停止支持它,尽管有一天他们可能会想到以“标准模式”拒绝它。

HTML5 草案目前不建议对此进行标准化。相反,他们的想法是允许style进入,body但仅在使用scoped属性时才允许,这意味着style元素的效果仅限于封闭块。这很奇怪,但与没有属性的style元素在.scopedbody

当然,如果有合理的处理方式,则不应使用此功能。

于 2012-07-22T05:02:41.247 回答
0

答案是不,它不应该在任何主要浏览器中呈现。

正如一些评论指出的那样,您不应该这样做。您将违反标准,这意味着结果未定义——即它应该可以工作,但您无法确定。

我很欣赏在某些情况下(即使用设计不佳的 CMS 时)它可能是唯一可用的选项,但通常这样做是一件坏事。

如果您确实需要这样做,并且您对此感到担心,一种解决方案是将内容放入 HTML 注释中:

<style type="text/css">
<!--
 .slideshow img { display: none }
 .slideshow img.first { display: block }
-->
</style>

这应该阻止它被不喜欢<style>在正文中的浏览器看到。

另一种选择是将其放入外部样式表文件中,并使用<style>标签包含它。这应该仍然有效,但由于该元素不会有任何直接内容,因此对于表现不佳的浏览器来说,它不会显示任何内容。

希望有帮助。

于 2012-07-21T23:14:36.623 回答