Question

我刚才发现在我的网站botlane.net中，标题在Firefox中无法正确显示。

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

http://gyazo.com/b76f64331a59eb60e9fc4ade66d76fbb

在Firefox中显示:(行为错误）

http://gyazo.com/943e97e3762bf6b85e9d0b5e1c8a2ad0

我设法在JSFiddle中重新创建了这个问题

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

根据我的评论尝试此基础：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这里有一些问题，我认为Chrome和任何浏览器按照你的意图显示这个只是更宽容一点。

首先，在使用CSS ID选择器（例如div#navi2）时，您不需要预先添加要定位的元素的标记名称。 #navi2足够具体，其他一切都很混乱。

第二，为什么div元素中的额外a为什么？您可以省去这些并直接使用链接元素。他们一样好。

第三，您将布局代码（float）应用于DOM层次结构中的元素，而不是您实际定位的图层。你试图在#headWrap中解决这个问题，并应该与其直接的孩子一起工作。但是，您完全跳过a元素并将代码应用于div。虽然这本身并没有错，但总的来说这意味着麻烦。

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

我为你的小提琴分叉了一个改进的版本：http://jsfiddle.net/maryisdead/Lsrhjnby/

标题在Firefox中无法正确显示

3 个答案: