Table caption not resizing container on IE/Edge with white-space: nowrap

Viewed 295

Hi I'm working on a menu with Bootstrap 4 Alpha 6. It is working well on Chrome 60 and FF 54. But on Edge and IE I'm getting ploblemns with table caption. It isn't expanding table width as FF and Chrome does.

I used the table aproach to vertically center the image and align bottom the caption. I believe that the problemn is related with white-space: nowrap.

I also tried the add table-layout: fixed, without success.

FF/Chrome

FireFox/Chrome

IE/Edge

IE/Edge

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;
 }
0 Answers
Related