Header 在 Firefox 中显示不正确

Question

我刚刚发现在我的网站 botlane.net 中 header 在 Firefox 中显示不正确。

在 Chrome 中显示：（正确行为）（也在 Internet Explorer 中）

http://gyazo.com/b76f64331a59eb60e9fc4ade66d76fbb

在 Firefox 中显示：（错误行为）

http://gyazo.com/943e97e3762bf6b85e9d0b5e1c8a2ad0

我设法在 JSFiddle 中重现了问题

http://jsfiddle.net/e8ry9art/1/

HTML:

<div id="header">
    <div id="headWrap">
        <a href="/rankings">
            <div id="navi1">
                <span >RANKINGS</span>
            </div>
        </a>
        <a href="/">
            <span class="helper"></span><img id="logo" src="http://botlane.net/assets/images/logo3.png" alt="Logo" />
        </a>
        <a href="/legal">
            <div id="navi2">
                <span>LEGAL INFORMATION</span>
            </div>
        </a>
    </div>
    <div id="fulldash"></div>
</div>

CSS:

div#header {
    width: 100%;
    height: 10%;
    min-height: 100px;
    position: relative;
}

div#headWrap {
    width: 1224px;
    height: 100%;
    margin: auto;
    text-align: center;
    white-space: nowrap;
}

div#navi1 {
    float:left;
    height: 100%;
    width: 200px;
}

div#navi1:hover {
    color: #FFAD19;
}

div#navi2 {
    float: right;
    height: 100%;
    width: 200px;
}

div#navi2:hover {
    color: #14CC67;
}

谁能告诉我这是什么问题？

Answer 1

尝试用这些样式替换：

div#headWrap {
    width: 1224px;
    height: 100%;
    margin: auto;
    text-align: center;
}

div#navi1 {
    float:left;
    height: 100%;
    width: 200px;
    margin-top: 24px;
}

div#navi2 {
    float:right;
    height: 100%;
    width: 200px;
    margin-top: 24px;
}

以上样式之所以有效，是因为 white-space: nowrap 被移除了。 nowrap 属性旨在防止文本换行到下一行，并且可能与 text-align: center 冲突，因为用于居中的父引用在 firefox 中的处理方式不同。

Answer 2

根据我的评论试试这个：

div#header {
    width: 100%;
    height: 10%;
    min-height: 100px;
    position: relative;
}

div#headWrap {
    width: 1224px;
    height: 100%;
    margin: auto;
    text-align: center;
}

div#navi1 {
    float:left;
    height: 100%;
    width: 200px;
       white-space: nowrap;
}

div#navi1:hover {
    color: #FFAD19;
}

div#navi2 {
    float: right;
    height: 100%;
    width: 200px;
    white-space: nowrap;
}

div#navi2:hover {
    color: #14CC67;
}

.vmiddle {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

        <div id="header">
            <div id="headWrap">
                
                    <div id="navi1">
                        <a href="/rankings">RANKINGS </a>
                    </div>
               
             
                    <span class="helper"></span>   <a href="/"><img id="logo" src="http://botlane.net/assets/images/logo3.png" alt="Logo" />
                </a>
                
                    <div id="navi2">
                        <a href="/legal">LEGAL INFORMATION  </a>
                    </div>
              
            </div>
            <div id="fulldash"></div>
        </div>

Answer 3

这里有一些错误，我认为 Chrome 无论浏览器按照您的意图显示此内容，都更加宽容一些。

首先，当使用 CSS id 选择器（例如 div#navi2）时，您不需要在您定位的元素的标签名称前加上前缀。 #navi2 已经足够具体了，其他一切都是混乱的。

其次，为什么 a 元素中有那些额外的 div？您可以节省这些并直接使用 link 元素。他们一样好。

第三，您将布局代码 (float) 应用到 DOM 层次结构中比层更靠下的元素重新真正瞄准。您正在尝试解决 #headWrap 中的问题，因此应该与它的直接子项一起工作。但是您将完全跳过 a 元素并将您的代码应用于 div 元素。虽然这本身并没有错，但通常这意味着麻烦。

第四，浮动元素（如您的 links）应该位于浮动元素之前。只是避免头痛的提示。

我用一个改进的版本分叉了你的 Fiddle：http://jsfiddle.net/maryisdead/Lsrhjnby/

Header 在 Firefox 中显示不正确

Header not displayed correctly in Firefox

html

css

browser

firefox

google-chrome