表格标题没有调整IE / Edge上带有空格的容器：nowrap

Question

您好我正在使用Bootstrap 4 Alpha 6进行菜单工作。它在Chrome 60和FF 54上运行良好。但在Edge和IE上我得到了带表格标题的ploblemns。它不会像FF和Chrome一样扩展表格宽度。

我使用表格aproach垂直居中图像并将标题对齐底部。我相信问题与白色空间有关：nowrap。

我也尝试过add table-layout：fixed，但没有成功。

FF /铬

IE /边

HTML

<nav class="hidden-md-down menu-desktop navbar navbar-toggleable-xl">
    <div class="container-fluid">
        <ul class="navbar-nav mx-auto ">
            <li class="nav-item">
                <a href="/pulverizacao" class="nav-link">
                    <div>
                        <img src="pulverizacao.png" alt="Pulverização">
                    </div>
                    <span>Pulverização</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="/equipamentos" class="nav-link">
                    <div>
                        <img src="equipamentos.png" alt="Equipamentos">
                    </div>
                    <span>Pulverização</span>
                </a>
            </li>
             .
             .
             .
        </ul>
    </div>
</nav>

CSS

.menu-desktop {
    background-color: @fundo-menu;
    border-bottom: 3px solid @borda-inferior-menu;
}

.menu-desktop ul > li {
    text-align: center;
    transition: .5s;
    border-right: 0.2rem groove @borda-lateral-menu;
    padding-right: 1rem;
    padding-left: 1rem;
    display: table;
}

.menu-desktop ul > li:last-child {
    border-right: none;
}

.menu-desktop ul > li:hover {
    background-color: @fundo-menu-hover;
}

.menu-desktop ul > li > a {
    height: 5rem;
    padding-bottom: 0;
    padding-top: 0;
    display: table;
    width: 100%;
}

.menu-desktop ul > li > a > div {
    display: table-cell;
    vertical-align: middle;
}

.menu-desktop ul > li > a > span {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    display: table-caption;
    caption-side: bottom;
    white-space: nowrap;
}

.menu-desktop ul > li:hover .menu-desktop-mais {
    display: table;
 }