Question

我无法在firefox中正常浮动。如果你在FireFox中打开它，你会注意到它全部在它自己之上。但它在IE和Chrome中运行良好。

我可能做错了，但你可以看到我尝试了moz-inline-stack，并将float元素放在第一位。

这是一个小提琴链接。 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><a href="" style="color: #0475b8;">Conversations</a>

                </li>
                <li><a href="" style="color: #0475b8;">Directory</a>

                </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

我不确定你认为-moz-inline-stack会达到什么目标，但这是你布局破损的原因。

从小提琴中删除它会导致布局返回到其他浏览器中的外观。

除了（moz-inline-stack和float first）

1 个答案: