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
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;
}

