CSS 布局：调用 slideDown() 后的元素覆盖

Question

我有一个菜单按钮，单击该按钮时，会在 <div> 上调用 slideToggle()，其中包含 <ul>。在桌面版 Chrome 和 Firefox 中显示如下：

即元素向下滑动，将其下方的内容向下推。这是预期的行为。

然而，在 iOS7 的 Chrome 和 Safari（以及 Adob​​e Edge Inspect）和 Android 浏览器 4.1.2 中，菜单会覆盖 DOM 中它下方的元素：

我的尝试

• 我们的好朋友z-index（在<ul> 上更高，甚至在它下面的元素上尝试否定）
• 我已经尝试了两个元素上display CSS 属性的所有排列（例如，block、display-block）。
• 我已经尝试了position 属性的所有排列（一个带有absolute，另一个带有relative；一个带有static，另一个带有relative，等等）
• 我已经尝试了浮动和非浮动两个元素的所有排列。
• 我已尝试将硬编码的高度属性添加到菜单中
• 使用边距和填充

注意：不幸的是，这是在开发环境中，因此您无法在任何地方对其进行测试。但是，我将使用 js fiddle 进行更新。

编辑

Here's 一个小提琴，但我无法让它与媒体查询一起使用。

编辑 2

它实际上可以在我的手机上运行，​​所以它一定是我拥有的其他 CSS。

编辑 3

我尝试将我正在使用的框架 Foundation 注释掉，但仍然会发生这种情况。它一定在别的地方。

Answer 1

好吧，在将整个应用程序中的 20,000 多行 CSS 一分为二之后，就可以归结为这个了。

导航的包含元素<div class="header-container"> 在CSS 中具有height: 50px 的高度属性。显然，我尝试的桌面浏览器将slideDown 解释为允许包含元素的高度增长，而移动浏览器则没有。

将该属性更改为min-height: 50px 解决了这个问题。