Mozilla 中的徽标正在下降 header

Question

这是我的jsFiddle, which I have taken from my previous question 。

CSS是：

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

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

现在看看它在 Chrome 中的样子：现在看看它在 Mozilla 中的样子：

看看标志是怎么掉出来的header？如何解决这个问题？

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

Answer 1

这可能不是您想要的简洁和技术性的答案，但这无疑是由于 Chrome 和 Firefox 的渲染引擎之间的差异造成的。

如果您正在寻找快速修复，我建议您设置 #logo { top: 0; }。这似乎解决了 FF 中的问题而不影响其在 Chrome.

中的外观

Answer 2

这完全是由于 #logo 的父级上的 position: flex;，它在几乎每个浏览器中的呈现方式都不同。那，以及关于 #logo.

的垂直定位没有任何规则的事实

例如，如果您添加

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

对于您的 #logo，大多数浏览器会将它垂直居中在第一个带有 position: relative 的父项中。

Mozilla 中的徽标正在下降 header

Logo is falling of header in Mozilla

html

css

css-position

jquery-mobile