Question

我希望在用户禁用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标签可见时，它会出现在某些内容的前面。我不希望这样，内容应显示在警告下方。

我该怎么做？

Answer 1

如果你想要position的行为：fixed AND需要从顶部向下推送初始内容，你可以在你的noscript区域中包含第二个div。给这个div可见性：隐藏，高度等于div的高度，位置为：fixed。

Answer 2

问题在于您在警告上设置position: fixed。您无法真正期望页面的内容可以移动，因为您将其修复到浏览器窗口的顶部。向下滚动会发生什么？整个页面的内容重新排列以绕过警告？

您是否希望警告卡在浏览器窗口的顶部，即使它们滚动？如果没有，position: fixed就不是你想要的了。

Div内部无脚本标签不能很好地显示

2 个答案: