Firefox <img> 放置问题

Question

header 中的徽标应该居中，如果您在 Chrome 或 Safari 上，您会看到这一点。但是，当我继续使用 Firefox 时，图像被强制置于 header 之外，完全脱离了当前视口。我没有使用任何需要供应商前缀的特殊规则...这是怎么回事？

这是徽标的外观，当前 Chrome：

这是它在 Firefox 上的样子（我使用 3d 模型以获得更好的可视化效果）：

Answer 1

不确定是什么原因造成的，但您可以这样解决：

header {
   text-align: center
}
header img {
   display: inline-block;
}

Answer 2

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

此外，您应该 copy/paste 问题 header 区域的简化版本的代码，而不是发布 link

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

由于它们是浮动的，因此它们脱离了正常的文档流，需要清除

您可以将列表项设置为 display: inline-block，但这需要您删除每个项目之间的 space

像这样

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

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

作为结束语，我建议您将 header 区域的代码复制并粘贴到问题中（对其进行编辑），并复制相应的 css，这样它会更多对未来的用户有用。您还可以设置一个 http://jsfiddle.net 它使调试更容易

Firefox <img> 放置问题

Firefox <img> placement issue

html

css

firefox

google-chrome