导航栏元素在 Firefox 和 Chrome 中的显示不同答案

【问题标题】：Navbar elements appear different in Firefox and Chrome导航栏元素在 Firefox 和 Chrome 中的显示不同
【发布时间】：2018-04-02 11:11:58
【问题描述】：

导航栏元素在 Firefox 和 Chrome 中的显示方式不同。我使用span 标签为汉堡菜单设置动画，但在 Firefox 中看起来完全不同。它在 Chrome 和包括 Android 在内的其他浏览器中看起来不错。我也尝试过浏览器重置 CSS。我不知道我错过了什么。

see this jsfiddle example in firefox

html, body, div, span, h1, p, a, address, img, i, ul, li, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
footer, header, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ul {
  list-style: none;
}

a, a:hover {
  text-decoration: none;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*----- reset end-----------*/
.header {
  background-color: #333;
  width: 100%;
  transition: .8s;
}
.header nav {
  width: 100%;
  margin: 0 auto;
  position: sticky;
  height: 100vh;
  top: 16px;
}
.header nav .btn {
  outline: none;
  border: none;
  display: block;
  cursor: pointer;
  background-color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  margin: 16px;
}
.header nav .btn span {
  background-color: #FD5B4E;
  width: 95%;
  height: 0.1875rem;
  position: relative;
  display: block;
  margin: auto;
  top: 50%;
  transition: background-color .5s .3s;
}
.header nav .btn span:before {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  top: -0.625rem;
  position: absolute;
  transition: top .3s .4s,transform .3s;
}
.header nav .btn span:after {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  position: absolute;
  transition: top .3s .4s,transform .3s;
  top: 0.625rem;
}

<body>
    <header id="header" class="header sidbar">

        <nav>
            <button class="btn"><span></span></button>

        </nav>
    </header>
    <!-- /header -->


</body>

【问题讨论】：

请同时提供您的 HTML 代码
您使用 SCSS 而不是 CSS 有什么原因吗？
@FluffyKitten 没有特殊原因。我用 scss 写的，所以我粘贴了它。
我想知道，因为这里的另一个用户曾经在他们的页面中包含 SCSS 而不是 CSS（他们的 Firefox 中有一些插件可以直接解释 SCSS） - 因为我想知道这是否是类似的情况 & SCSS 没有被正确解释 :) 既然你已经包含了 CSS，这会有所帮助，因为现在我们可以自己尝试一下了。我去看看

标签： html css google-chrome firefox browser

【解决方案1】：

问题在于 span 的 CSS 中的 top:50%。它在 Chrome 上没有做任何事情，但在 FF 中，它使跨度比其默认位置向下移动 50%（实际上已经是中间位置，因为您使用的是 button）。

你只需要改变这个类：

.header nav .btn span {
  background-color: #FD5B4E;
  width: 95%;
  height: 0.1875rem;
  position: relative;
  display: block;
  margin: auto;
  /* top: 50%;  <- remove this and it works!  */
  transition: background-color .5s .3s;
}

如果您使用 div 而不是按钮，则需要考虑将 span 置于中心，但 button 元素会自动将内容垂直居中。通过指定您希望顶部为 50%，FF 将 50% 添加到当前居中位置。

工作示例当您删除 top 时：

小提琴：https://jsfiddle.net/dt17u5uz/2/ 或片段：

html, body, div, span, h1, p, a, address, img, i, ul, li, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
footer, header, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ul {
  list-style: none;
}

a, a:hover {
  text-decoration: none;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*----- reset end-----------*/
/* autoprefixer: off */
/* autoprefixer: off */
.header {
  background-color: #333;
  width: 100%;
  transition: .8s;
}
.header nav {
  width: 100%;
  margin: 0 auto;
  position: sticky;
  height: 100vh;
  top: 16px;
}
.header nav .btn {
  outline: none;
  border: none;
  display: block;
  cursor: pointer;
  background-color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 16px 16px;
}
.header nav .btn span {
  background-color: #FD5B4E;
  width: 95%;
  height: 0.1875rem;
  position: relative;
  display: block;
  margin: auto;
  top: 0;
  transition: background-color .5s .3s;
}
.header nav .btn span:before {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  top: -0.625rem;
  position: absolute;
  transition: top .3s .4s,transform .3s;
}
.header nav .btn span:after {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  position: absolute;
  transition: top .3s .4s,transform .3s;
  top: 0.625rem;
}

<body>
  <header id="header" class="header sidbar">

    <nav>
      <button class="btn"><span></span></button>

    </nav>
  </header>
  <!-- /header -->


</body>

仅供参考，您的按钮也存在边距折叠问题，这可能只是因为您只向我们展示了部分代码。解决此问题的一种方法是将overflow:auto 添加到您的.header nav {} CSS 规则中。更多关于collapsing margins from sitepoint

【讨论】：

感谢兄弟，它确实帮助我理解了按钮和 div。我正在使用 Css 网格。这会影响 FF 的保证金崩溃吗？我应该怎么做？
@Vigneshwarkumar CSS 网格不应该影响折叠边距问题，即使使用基本的 css/html 也会发生这种情况。 See this question to understand it more。如果我的回答对您最初的问题有所帮助，请考虑接受它，以便在网站上将其标记为已解决。请参阅帮助页面What to do when someone answers my question? 它也会给我们两个代表点。 PS我不是兄弟，我是女性:)
@Vigneshwarkumar 仅供参考，这里是用overflow:auto 更新的小提琴添加：jsfiddle.net/dt17u5uz/3 将其与jsfiddle.net/dt17u5uz/2 比较，您会看到崩溃边距造成的差异。