noscript 标签的正文样式？答案

【问题标题】：Body styling for a noscript tag?noscript 标签的正文样式？
【发布时间】：2010-11-23 09:53:00
【问题描述】：

如果没有启用 JavaScript，我希望我的正文有 overflow:hidden（没有滚动条）。

我该如何解决这个问题？是否可以在

中使用 noscript 标签并在其中设置特定样式？

【问题讨论】：

【解决方案1】：

如果您的意思是 HTML 文档的 <body>，我会为禁用 JS 的用户构建 HTML。例如，在 CSS 文件中有 body { overflow:hidden }，然后使用 JavaScript 为启用 JavaScript 的用户设置页面（即使用 JavaScript 删除 overflow:hidden）。

【讨论】：

好主意，尤其是现在 noscript 已被弃用。
+1！帮我一个忙，省略内联样式。那会让它变得完美:)
是的，我不会在现实生活中使用内联样式，但我认为对于示例来说它会更紧凑。我会编辑答案:)
+1 @Neil：在哪里说 noscript 元素已被弃用？
@Sebastian，我的错误我的印象是它在 HTML5 中已被弃用，但快速浏览一下表明我完全错了。

【解决方案2】：

我很确定

<noscript>
    <style type="text/css">
        body {
            overflow:hidden;
        }
    </style>
</noscript>

在您的<head> 中可以完成这项工作。

但正如在另一篇文章中所述，为此目的使用 CSS 可能会更好，并为带有 JavaScript 的浏览器启用溢出。

【讨论】：

它可能在某些浏览器中有效，但肯定不能保证，因为 <style> 标签放在 <noscript> 标签内时是无效标记，<noscript> 标签在<head> 标签。

【解决方案3】：

在 head 部分使用 <noscript> 标记是无效的（只允许在 <body> 中使用），因此您可以改用此解决方法（HTML5 示例）

 <!doctype html>
 <html lang="en">
     <head>
         <script>document.documentElement.className = 'js';</script>
         <style>
             body { overflow: hidden; }
             html.js body { overflow: auto; }
         </style>
     </head>

【讨论】：

【解决方案4】：

这可能是一个超级矫枉过正，但只是为了一般知识：

Modernizr 使用一种机制，它建议您将 no-js 类放在 html 标记上。如果modernizr 运行，它会删除no-js 类。使用modernizr 将是一个矫枉过正，但你可以自己做。在您的 CSS 中，您将拥有：

html.no-js body {
    overflow:hidden;
}

【讨论】：

这是我认为的最佳答案。常见做法，并允许其他无 js 样式。