仅 Microsoft Edge 中的 xy 网格和菜单存在问题

Question

我在 Foundation 6.5.3 中创建了响应式 dropdown/drilldown megamenu。

它适用于除 Microsoft Edge 和 IE11 之外的所有浏览器。我预计 IE 会出现问题，但边缘问题让我陷入困境。

在 Edge 中，菜单项垂直堆叠，即使它应该是水平菜单。如本笔所示：

 https://codepen.io/denpub/pen/KLRQGO

现在包裹菜单的 div 和包裹大菜单的 div 同时包含 grid-x 和单元格样式：

 <div class="grid-x cell ..."></div>

似乎是导致堆叠问题的原因，如果我这样分开它们：

 <div class="grid-x ..."><div class="cell"></div></div>

它修复了 Edge 中的堆叠问题，但会导致菜单在所有浏览器中失去漂亮的弹性间距，如这支笔所示：

 https://codepen.io/denpub/pen/KLRojm

在 IE11 中，所有菜单项相互堆叠。如果有人有解决此问题的建议，我们将不胜感激。

Answer 1

我猜是父菜单上的 expanded class。当 space.

较少时，这可能会导致 li's 变为全宽

Problem with xy grid and menu in Microsoft Edge only