CSS布局：调用slideDown（）后的元素叠加

Question

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

也就是说，元素向下滑动并向下推动其下方的内容。这是预期的行为。

在适用于iOS7的Chrome和Safari（以及Adobe Edge Inspect）和4.1.2中的Android浏览器中，菜单会覆盖DOM中位于其下方的元素：

我尝试过什么

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

注意：不幸的是，这是在开发环境中，所以它不是你可以测试它的任何地方。但是，我会用js小提琴更新。

修改

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

编辑2

它实际上可以在我的手机中使用，所以它必须是我拥有的其他CSS。

编辑3

我尝试评论Foundation，我正在使用的框架，但仍然会发生。它必须在其他地方。

Answer 1

好吧，在整个应用程序中将我们的整个20,000多行CSS分成两部分之后，它归结为此。

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

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