无脚本标签内的 div 显示效果不佳答案

【问题标题】：Div inside no-script tag not displaying well无脚本标签内的 div 显示效果不佳
【发布时间】：2010-10-16 16:09:53
【问题描述】：

我想在用户禁用 javascript 时显示 noscript 警告，就像 StackOverflow 一样。

我使用这个 html：

<noscript>    
  <div id="noscript-warning">
    Este sitio funciona mejor con JavaScript habilitado. Descubrí
    <a href="">cómo habilitarlo.</a>
  </div>
</noscript>

还有这个css：

#noscript-warning
{
    font-family: Arial,Helvetica,sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    text-align: center;
    font-weight: bold;
    font-size: 12pt;
    color: white;
    background-color: #AE0000;
    padding: 10px 0;
    display: block;    
}

#noscript-warning a
{
    color: #FFFFC6;
}

#container
{
    width: 98%;
    margin: auto;
    padding: auto;
    background-color: #fff;
    color: black;
    border-style: solid;
    border-color: #3E4F4F;
    border-width: 1px 2px 2px 1px;
    line-height: 130%;
}

#container 是我的模板的主要内容元素。

当noscript标签可见时，它会出现在一些内容的前面。我不想这样，内容应该显示在警告下方。

我该怎么做？

【问题讨论】：

标签： css

【解决方案1】：

问题在于您在警告上设置了position: fixed。你不能指望页面的内容会围绕它移动，因为你将它固定在浏览器窗口的顶部。当你向下滚动时会发生什么？整个页面的内容会自行重新排列以绕过警告？

您是否希望警告在浏览器窗口滚动时仍停留在顶部？如果没有，position: fixed 不是您想要的。

【讨论】：

-1：AaronSieb 的解决方案让你吃蛋糕也能吃。

【解决方案2】：

如果您想要 position: fixed 的行为并且需要从顶部向下推送初始内容，您可以在 noscript 区域中包含第二个 div。将此 div 设置为可见性：隐藏，并且高度等于具有位置的 div 的高度：固定。

【讨论】：

+1：如果您想要一个固定的警告，并且内容清晰地位于其下方，则此方法有效。