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

Question

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

在测试期间，我偶然发现两个一个问题 s 我无法解决。
<击>的 1。徽标
徽标绝对位于中间left: calc(50% - 150px)（假设徽标的宽度为300px。当徽标尺寸减小时，定位会根据媒体查询进行调整）。但在多个设备和浏览器上，徽标显示在左侧 这发生在：
- iPad上的Chrome和Safari，其iOS版早于iOS7（也可能在iPhone上） - Android平板电脑上的原生互联网浏览器（版本未知）

2。语言选择菜单
包含三种语言选项的小菜单似乎也忽略了一些样式，但我无法弄清楚原因。在更宽的屏幕上右侧放置一个浮子。列表项（每个语言选项一个）与display: inline-block水平放置。它从上面的导航中获得了它的风格。因此，当在较小的视口上导航从水平顺序变为垂直顺序时，语言选择也会发生变化。所以我在媒体查询中添加代码来抵消这种情况。它适用于我桌面上较小的浏览器视口，但不适用于手持设备 这发生在：
- 在Safari和Chrome（不是Android设备）上使用iOS8和iOS6的iOS设备（iPad和iPhone）

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

非常感谢任何帮助。

Answer 1

对于徽标问题，如果calc()导致问题，请避免使用CSS转换：

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

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

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