What is the trick getting floats to work in FireFox other than (moz-inline-stack and float first) - firefox

Question

I can't get things to float correctly in firefox.
If you open it in FireFox you will notice its all on top of itself.
But it works fine in IE, and Chrome.
I may be doing it wrong, but you can see I have tried moz-inline-stack, and putting the float elements first.
Here is a Fiddle link.
https://jsfiddle.net/james_freeman/zWxbL/10/embedded/result/
<div style="background-color:white;">
<div id="psNav" style="color: #0475b8;">
<div class="psNav-right dropdown">
<a href="#" id="navbarMenu" class="dropdown-toggle psNav-link" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">MENU <i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" style="padding:0;">
<li>Conversations
</li>
<li>Directory
</li>
</ul>
</div>
<div class="psNav-right"> <a class="psNav-link" id="logoutLink" href="">Logout</a>
</div>
<div class="psNav-right"> <a class="psNav-link" id="displayName">Doe, John</a>
</div>
<div class="psNav-left"> <a class="psNav-link" href="">
<img id="navBarLogo" src="" alt="Company Logo">
</a>
</div>
<div class="psNav-center"> <a class="psNav-link" id="navbarPageTitle">somewhere</a>
</div>
</div>
</div>
#psNav {
display: inline-block;
display: -moz-inline-stack;
vertical-align: top;
width: 100%;
text-align: center;
height: 90px;
clear: both;
font-family:'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1.5em;
border-bottom-color: #e7e7e7;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
*display: inline;
}
.psNav-center {
display: inline-block;
display: -moz-inline-stack;
margin: 0 auto;
height: inherit;
}
.psNav-left {
float: left;
height: inherit;
padding-left: 10px;
}
.psNav-right {
float: right;
height: inherit;
padding: 0 20px 0 20px;
}
.psNav-link {
vertical-align: middle;
line-height: 85px;
text-decoration: none !important;
}
.psNav-link:visited {
color: #0475b8;
}
.psNav-link:hover {
color: #0475b8;
}
.psNav-link:active {
color: #0475b8;
}
#displayName {
cursor: default;
font-weight: 300;
}
#navbarPageTitle {
cursor: default;
}
#navBarLogo {
height: 55px;
}

Answer 1

I'm not sure what you thought -moz-inline-stack was going to achieve, but it is the cause of your broken layout.
Removing it from the fiddle results in the layout returning to exactly what how it looks in the other browsers.