无法让 CSS 框阴影与固定的页眉和页脚一起使用

Question

我在 WP 4.0 “Twenty Twelve” 主题上构建了一个带有固定页眉、固定页脚和滚动正文的网站。

尝试在页眉的灰色区域下方和页脚的灰色区域上方应用 boxshadow，但两者都无法正常工作。让我们专注于标题。基本 HTML/CSS 按预期以简化形式工作：http://jsfiddle.net/tvq5hw4r/

HTML：

<div id="menubar" class="shadow-below">
    <nav id="site-navigation" class="main-navigation" role="navigation">
Home | About | Contact
    </nav><!-- #site-navigation -->
</div><!-- #menubar -->

CSS：

#menubar {
    width:100%;
    height:1em;
    background-color: lightgray; 
    padding: .5em;
    color: white;
    box-sizing: content-box; 
}

.shadow-below {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;

/* For IE 8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

然而，我已经在多个操作系统（Vista Home Premium SP2、Android 4.4）上的多个浏览器（FF、Chrome、IE）中测试了实际网页，但在任何组合上都没有看到预期的结果。

已尝试通过连接到灰色区域的选择器，按 id 和按类别分配所需的样式。最多，我在文本下方得到阴影（但在灰色区域内，而不是在它下方）；在所有其他情况下，我没有得到任何阴影。

我还尝试从同一页面（图像上）的工作阴影中获取样式代码，并在相关选择器上逐字使用该样式代码：仍然没有变化。

尝试使用我也创建的另一个网站的工作 CSS 样式：没有变化。

尝试过其他网站建议的代码（css-tricks 和 robertnyman- 无法发布完整链接）：没有变化。

尝试在每个样式声明中添加“！important”：没有变化。

由于这不是浏览器问题或基本代码问题，它似乎是样式级联（或元素如何嵌套）的问题，或者甚至可能是溢出或某些此类属性的问题？

Answer 1

尝试将margin-bottom 分配给.shadow-below

EG

.shadow-below { margin-bottom:10px; }