类似堆栈溢出的 JavaScript 警告和 w3c HTML 验证答案

【问题标题】：Stack Overflow-like JavaScript warning and w3c HTML validation类似堆栈溢出的 JavaScript 警告和 w3c HTML 验证
【发布时间】：2011-05-08 10:57:31
【问题描述】：

我有一个严重依赖 JavaScript 的网站。虽然大多数东西都很好地降级，但功能确实是二等的。所以，我想提醒用户，如果他们禁用了 JS，他们应该打开它。为此，我使用 NOSCRIPT 在页面顶部显示带有警报的 div，类似于 Stack Overflow 的做法。

这个 div 覆盖了页面内容的顶部，所以我必须将文档正文向下移动。由于 JS 不可用，因此必须使用 CSS，我使用类似：margin-top: 8px。完整的 HTML 如下所示：

<noscript>
<style type="text/css">body { margin-top:8em; }</style>
<div class="warn">WARNING<br>Turn on JavaScript for best experience</div>
</noscript>

问题是：我应该把这段代码放在哪里？

我尝试在 HEAD 部分，在 BODY 部分，在 BODY 之后，但无论它放在哪里，W3C HTML 标记验证器都会抱怨 文档类型不允许此处的元素“STYLE” 或文档类型不允许在此处使用元素“BODY”

我什至尝试将 CSS 和 DIV 分成两部分并为每个部分找到合适的位置，但得到了相同的错误。

【问题讨论】：

标签： css w3c-validation noscript

【解决方案1】：

您可能只需要接受它并接受您的页面将无法验证。

...或改变它的工作方式。你能把它放在前面position: static，让它自然地把你的页面内容往下推吗？

...或，让你的body 总是有margin-top: 8em 很棘手。然后在 JavaScript 中准备好 DOM（或加载窗口）时，将其设为 0。

CSS

body {
   margin-top: 8em;
}

body.javascript {
   margin-top: 0;
}

JavaScript

window.onload = function() {
   document.getElementsByTagName('body')[0].className += ' javascript';
};

【讨论】：

这不会导致页面加载时边距可见吗？
@Alexandre Jasmin 是的，看看跨浏览器 DOM 就绪事件。或者在 JavaScript 库中使用 $(function() { }); 或等效项。

【解决方案2】：

您需要在 noscript 元素内有一个块元素（例如 div）并将 style 元素移动到 head 元素内以获得正确的验证。

【讨论】：

你没有抓住重点。仅当 JavaScript 不可用时才需要应用样式。因此它必须在 NOSCRIPT 标签内。