溢出的跨度：隐藏；不显示在 Firefox 中

Question

由于某种原因，它漂浮在实际位置下方。

Firefox 上的示例：

Chrome 上的示例：

演示：http://jvnknvlgl.github.io/oxygen-template
来源：http://github.com/jvnknvlgl/oxygen-template

HTML:

<nav>
  <span><a class="main-current" href="index.html">Home</a></span>
  <span><a class="main" href="page-1/sub-1.html">Subpages</a></span>
  <span><a class="main" href="page-2.html">Multi-column</a></span>

  <! The span it's about >
  <span class="credits"><a class="credits" target="_blank" href="http://github.com/jvnknvlgl/oxygen-template">Oxygen by jvnknvlgl</a></span>

</nav>

CSS:

span {
  line-height: 56px;
  padding-left: 4px;
  padding-right: 10px;
}

span.credits {
  float: right;
  overflow: hidden;
  padding-left: 30px;
  padding-right: 4px;
}

nav {
  max-width: 800px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: auto;
  margin-right: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

在此先感谢任何可以提供帮助的人！

Answer 1

只需删除

nav {
    white-space: nowrap;
}

将解决您的问题。

Answer 2

nav {
    white-space: normal;
}

然后进行媒体查询，了解您的导航链接何时开始消失并恢复为：

@media (max-width: 400px) {
    nav {
        white-space: nowrap;
    }
 }

Answer 3

删除

nav {
    white-space: nowrap;
}

溢出的跨度：隐藏；不显示在 Firefox 中

Span with overflow: hidden; doesn't show up in Firefox

html

css

firefox