徽标在Mozilla中掉头

Question

这是我的jsFiddle，我之前的问题是here。

CSS是：

#logo {
    position: absolute;
    left: 2%;  
}

@media (max-width: 500px) {
    .ui-block-solo { flex-direction: column; }
    #logo { position: static; }
}

现在看看它在Chrome中的外观： 现在看看它在Mozilla中的外观：

看看徽标是如何落在标题之外的？如何解决这个问题？

Mozilla版本： 40.0.3 。但是，我的一位用户发现了这个问题，但我不知道他的Mozilla的版本。

Answer 1

这可能不像你想要的那样简洁和技术性，但毫无疑问，Chrome和＆ Firefox的渲染引擎。

如果您正在寻找快速解决方案，我建议您设置#logo { top: 0; }。这似乎解决了FF中的问题而没有损害它在Chrome中的外观。

Answer 2

这完全归功于position: flex;父级的#logo，几乎在每个浏览器中呈现的方式都不同。那个，以及你没有关于#logo的垂直定位的任何规则。

例如，如果添加

top: 50%;
transform: translateY(-50%);

到#logo，大多数浏览器会将其垂直居中于position: relative的第一个父级。