noscript 标签在 Internet Explorer 上不起作用

Question

我有一个带有<noscript> 标签的网站，它可以在除 IE (7,8,9,10) 之外的所有浏览器上正常运行。 在 Internet 选项中的安全设置下禁用脚本后，我只能在我的 PC 上查看 IE 上的 <noscript> 内容，但在其他 PC（几乎全部）上我看不到代码。使用这些 PC，我们在 Gmail 和 FB 的网站上使用相同的设置，但我们确实收到了未启用 js 的警告。

这是 HTML：

<noscript>
    <div class="noscript">
        JavaScript must be enabled in order for you to use WEBSITE NAME in standard view.<br />
        However, it seems JavaScript is either disabled or not supported by your browser.<br />
        To use standard view, enable JavaScript by changing your browser options, then <a href="">try again</a>. 
    </div>
</noscript>

CSS：

.noscript {
    background: red;
    color: #fff;
    padding: 10px;
    text-align: center;
    position: relative;
    z-index: 3;
}

有什么想法吗？

谢谢！

Answer 1

即使我也遇到过这种情况，所以经过很多努力，我设计了一个效果很好的技巧。不要设置noscript 标记的样式，而是覆盖在div 中禁用javascript 时要显示的元素，然后使用javascript 不显示该div。 因此，当禁用 javascript 时，查看器将看到您希望他们看到的 div，但如果启用 javascript，则 div 将被您编写的脚本设置为不显示，使其不可见。

看下面的例子：

通常我们会这样做：

• html:<noscript> please enable javascript ... </noscript>
• css：noscript{background-color: red; color: white; font-size: 24px; ... }

---

改为这样做：

• html:<div class="noscript"> please enable javascript </div>
• css：.noscript{background-color: red; color: white; font-size: 24px; ... }
• js:const noscript = document.querySelector('.noscript').style.display="none";

Answer 2

也遇到过这个问题。我有这个在 IE 中工作，然后它突然停止了。我发现，如果您的 css 嵌套在实际 css 定义中的 noscript 标记下，它将 not 起作用。如果你只使用一个类名就可以了。

我正在使用 IE 10 进行测试，并使用他们的开发工具将文档模式更改为较旧的浏览器模式以进行验证。实际使用旧版浏览器时，结果可能会有所不同。如果是这种情况，请报告。

示例 html：

<noscript>
    <div class="noscript">
        JavaScript must be enabled ...
    </div>
</noscript>

不起作用：

// classes nested beneath a noscript tag are not applied by IE
noscript div.noscript {
        display: block;
        text-align: center;
        color: white;
        font-weight: 700;
        background: #D53333;
        margin: 0 auto;
        padding: 4px;
    }

有效：

div.noscript {
    display: block;
    text-align: center;
    color: white;
    font-weight: 700;
    background: #D53333;
    margin: 0 auto;
    padding: 4px;
}

Answer 3

试试这个 CSS

.noscript {
   background: red;
   top: 100px; 
   color: #fff;
   padding: 10px;
   text-align: center;
   position: relative;
   z-index: 3;
}