Question

我的网站严重依赖JavaScript。虽然大多数东西都很好地降级，但功能上真的是二等级。因此，我希望提醒用户，如果他们禁用了JS，他们应该打开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>

问题是：我在哪里放置此代码？

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

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

Answer 1

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

...或会改变其工作原理。你可以先用position: static放置它，这样它会自然地推动你的页面内容吗？

...或，使您的body始终拥有margin-top: 8em非常棘手。然后在JavaScript中使用DOM ready（或窗口加载），将其设为0。

CSS

body {
   margin-top: 8em;
}

body.javascript {
   margin-top: 0;
}

的JavaScript

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

Answer 2

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

Stack Overflow-like JavaScript警告和w3c HTML验证

2 个答案:

CSS

的JavaScript