Firefox <img/>展示位置问题

Question

以下网址： http://richtechgala.com/

标题中的徽标应居中，如果您使用的是Chrome或Safari，则会看到此内容。但是，当我使用Firefox时，图像被强制在标题之外，完全脱离当前视口。我没有使用任何需要供应商前缀的特殊规则......这里发生了什么？

这是徽标的外观，目前在Chrome上：

这就是它在Firefox上的样子（我使用3d模型进行更好的可视化）：

Answer 1

这是因为第一个导航内的列表项是浮动的。您可以为它应用clearfix（https://css-tricks.com/snippets/css/clear-fix/），但我认为最好使用内联块，如下所示

此外，您应该复制/粘贴问题的简化版本的标题区域的代码，而不是发布链接

.universal li {
    background-color: white;
    box-sizing: border-box;
    float: left;
    height: 40px;
    padding-top: 10px;
    text-align: center;
    width: 50%;
}

由于它们是浮动的，它会将它们从正常的文档流中取出并且需要清除它

您可以将列表项设置为display: inline-block，但这需要您杀死每个项目之间的空格

喜欢这样

<nav class="universal container-fluid">
    <ul>
        <li>
            ...                 
        </li><li>
            ...
        </li>....
    </ul>
</nav>

你也可以

<nav class="universal container-fluid">
    <ul>
        <li>
            ...                 
        </li><!--
        --><li>
            ...
        </li>
    </ul>
</nav>

CSS

.universal li {
    background-color: white;
    box-sizing: border-box;
    display: inline-block;
    height: 40px;
    padding-top: 10px;
    text-align: center;
    width: 50%;
    vertical-align: top;
}

也是由于

.universal ul {
    width: 100vw;
}

有一个水平滚动条，删除该规则，因为不需要它

作为结束语，我建议您将标题区域的代码复制并粘贴到问题中（编辑它）并复制相应的CSS，以便对将来的用户更有用。您还可以设置http://jsfiddle.net，这样可以更轻松地进行调试