CSS - 位置：固定导航栏在 Safari（OS X 或 iOS）中不起作用答案

【问题标题】：CSS - Position:Fixed navigation bar not working in Safari (OS X or iOS)CSS - 位置：固定导航栏在 Safari（OS X 或 iOS）中不起作用
【发布时间】：2016-03-10 10:15:59
【问题描述】：

Here is the site in question.

如果您在 Chrome 中查看该页面，一切都会按预期运行（滚动过去，导航栏就会出现）。但是，在 OS X 和 iOS 中，它始终高于 Safari 中的所有内容。您可以将页面拉下并看到那里的导航栏。

我很少在移动设备或 Safari 上查看该网站，但我知道这在过去是有效的，并且我们没有对 CSS 进行任何更改。也就是说，我想知道是否是 Safari 更改导致了这种情况。

最后一点 - 我不是专业的网络开发人员，但我知道足够危险。我很乐意提供所需的任何其他详细信息。

谢谢！

【问题讨论】：

可能重复？这个：stackoverflow.com/questions/4889601/…
这能回答你的问题吗？ Position fixed not working in Safari Version 8.0.2

标签： css css-position navbar

【解决方案1】：

我在 Safari 中按照之前的帖子解决了这个问题：Position fixed not working in Safari Version 8.0.2

导致问题的原因是您的父母 <div id="page"> 正在使用 transform: translate3d(0, 0, 0); 和 -webkit-transform: translate3d(0, 0, 0); 。在 Safari 中使用它存在错误。

这是您的 CSS 文件中需要注释掉或删除的代码：

:not(html, #top-bar) {
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0) 
}

【讨论】：

成功了！非常感谢您的快速回答！

【解决方案2】：

您的导航栏固定在顶部？，可能您需要添加这些属性：

navbar{
  margin: 0;
  top: 0;
  left: 0; }

过去我在使用 safari 时遇到过类似的问题，但请提供您的 html 和 css 代码。

【讨论】：

我要问一个愚蠢的问题——最好的方法是什么？在 Chrome（或类似的东西）中使用开发工具不是更容易吗？
你们有现场网站或演示，我可以看看吗？更新——忽略，你已经有了解决方案。