如何强制 <noscript> 内联并继承 CSS 样式？答案

【问题标题】：How to force <noscript> to be inline & inherit CSS styles?如何强制 <noscript> 内联并继承 CSS 样式？
【发布时间】：2010-03-04 05:54:09
【问题描述】：

在另一个标签内使用<noscript> 似乎会导致它采用自己的样式（即无），并强制其中的文本采用自己的行（即使display:inline 使用CSS 设置）。有什么方法可以避免这种情况，或者可以使用替代方法吗？

这就是我的意思：http://www.webdevout.net/test?01I

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
 <style type="text/css">
  p { font-family:sans-serif; font-size:12px;}
  noscript {display:inline !important;}
 </style>
  </head>
  <body>
    <p>This is some text<noscript> that should be displayed on the same line with the same style if JS if disabled.</noscript></p>
  </body>
</html>

【问题讨论】：

顺便说一句，你用的是什么UA？在 IE8、fx3.5 中，这一切都在一条线上。

标签： html css stylesheet inline noscript

【解决方案1】：

我会推荐一种与使用 script/noscript 标签不同的方法。

这样的东西效果最好：

<!DOCTYPE html>
<html class="noJS">
    <head>
    <title>noJS Demo</title>

    <style type="text/css">
        html.noJS .jsRequired,
        html .noJS{
            display: none !important;
        }

            html.noJS span.noJS{
                display: inline !important;
            }

            html.noJS div.noJS{
                display: block !important;
            }
    </style>

    <script type="text/javascript">
        function onDocumentLoad(){
            var html = document.getElementsByTagName("html")[0];
            html.className = html.className.replace("noJS", "");
        }
    </script>
    </head>
    <body onLoad="onDocumentLoad();">
        <p>This is some text<span class='noJS'> that should be displayed on the same line with the same style if JS if disabled.</span></p>
    </body>
</html>

当然，如果你使用像jQuery这样的框架，那么JavaScript就更简单了，只需将JS函数和函数从body中移除，然后使用下面的JS即可：

$(document).ready(function(){
    $("html").removeClass("noJS");
});

【讨论】：

【解决方案2】：

旧但仍然相关的问题 - http://www.tigerheron.com/article/2007/10/alternative-noscript-tag 提出了一个出色且非常简单的解决方案：

“将以下代码插入网页的<head> 部分：

<script type="text/javascript"> document.write('<style>.noscript { display:none }</style>'); </script>

当您需要使用<noscript> 内联时，请改用<span class="noscript">。”

【讨论】：

【解决方案3】：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
 <style type="text/css">
  p { font-family:sans-serif; font-size:12px;}
 </style>
  </head>
  <body>
    <script type="text/javascript">document.write('<p>This is some text</p>');</script>
    <noscript><p>This is some text that should be displayed on the same line with the same style if JS if disabled.</p></noscript>
  </body>
</html>

这样的事情应该做你想做的事。你当然应该使用不显眼的方法，但我想这暂时高于标准。

【讨论】：

是吗？我以为他只是想让noscript中的东西在没有js的情况下隐藏起来，'this is'被故意遗漏了。
其实我不知道他想要什么，因为我看不到任何附加值。但是，如果支持脚本，我的示例将输出“这是一些文本”，以及“如果禁用 JS，这是应该以相同样式显示在同一行的一些文本。”如果它不受支持。这在同一行。

【解决方案4】：

您是否尝试过在 noscript 标记中放置像 span 这样的元素，然后为 span 设置样式？这是一个长远的目标，但可能会奏效。

或者，让您的选择器变得非常具体，然后试一试。 #content p noscript { display:inline !important; } 之类的东西可能有效。但它也可能无法解决。

作为最后的手段，你可以放弃 noscript 标签并放入一个 span（或你选择的元素）并给它一个 noscript 类——然后在你的 js 中删除第一件事。

【讨论】：