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

Question

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

在测试过程中，我在 两个 一所 暴露出 的问题我解决不了绊倒了。
1.徽标
徽标绝对位于 left: calc(50% - 150px)的中间位置 left: calc(50% - 150px) （假定徽标的宽度为300px。当徽标减小时，可以通过媒体查询来调整位置）。 但是在一些设备和浏览器上，徽标显示在左侧。
这发生在：
-装有iOS和iPad（比iPhone 7还要旧）的iPad上的Chrome和Safari
-Android平板电脑上的本机互联网浏览器（版本未知）

2.语言选择菜单
包含三种语言选项的小菜单似乎也忽略了某些样式，但是我不知道为什么。 在更宽的屏幕上，浮标位于右侧。 列表项（每种语言选项一个）在水平方向上带有display: inline-block 。 它从其上方的导航中获取样式。 因此，在较小的视口上，导航从水平顺序更改为垂直顺序时，语言选择也会更改。 因此，我在媒体查询中添加了代码以抵消这种情况。 它可以在台式机上较小的浏览器视口中使用，但不适用于手持设备。
这发生在：
-在Safari和Chrome上均具有iOS8和iOS6的iOS设备（iPad和iPhone）（非Android设备）

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

任何帮助深表感谢。

Answer 1

对于徽标问题，如果calc()引起麻烦，请避免出现麻烦并使用CSS转换：

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

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

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