android - 不同设备上的不同样式错误

Question

我花了一天时间修复下面链接的网站上的一些样式错误。 http://www.thebistronomy.com

在测试期间我偶然发现了 两个 一个问题 s 我无法解决。
<罢工>1.标志
Logo 绝对位于中间 left: calc(50% - 150px)(假设 Logo 的宽度为 300px。当 Logo 尺寸减小时，通过媒体查询调整位置)。但在一些设备和浏览器上， Logo 显示在左侧。
这发生在:
- iPad 上的 Chrome 和 Safari，iOS 比 iOS7 更早(可能也在 iPhone 上)
- Android 平板电脑上的原生互联网浏览器(版本未知)

<强>2。语言选择菜单
包含三种语言选项的小菜单似乎也忽略了一些样式，但我不明白为什么。在更宽的屏幕上，它位于右侧并带有 float 。列表项(每个语言选项一个)使用 display: inline-block 水平放置。它从其上方的导航中获取其样式。因此，当在较小的视口(viewport)上导航从水平顺序变为垂直顺序时，语言选择也会如此。所以我在媒体查询中添加代码来抵消这种情况。它适用于我桌面上较小的浏览器视口(viewport)，但不适用于手持设备。
这发生在:
- 在 Safari 和 Chrome 上安装 iOS8 和 iOS6 的 iOS 设备(iPad 和 iPhone)(不是 Android 设备)

我已经尝试了几种不同的方式来定位元素，并且我已经尝试使用 @media handheld 媒体查询无济于事。我一直在考虑为移动设备使用完全不同的样式表，但这应该会产生相同的样式错误。

非常感谢任何帮助。

Answer 1

对于 Logo 问题，如果 calc() 造成问题，则避免它并使用 CSS 转换:

#logo {
    ...
    left:50%;
    transform: translate(-50%, 0%);
}

此方法的另一个优点是，即使您更改 Logo 图像，它也将始终居中，而无需更改 CSS。

对于菜单问题，我不知道您遇到了什么问题和/或忽略了哪些样式。