Question

Navbar元素在Firefox和Chrome中显示不同。我使用span标签为汉堡包菜单制作动画，但它在Firefox中看起来完全不同。它在Chrome和其他浏览器（包括Android）中看起来很不错。我也试过浏览器重置CSS。我不知道自己错过了什么。

comparison of firefox and chrome. menu offset in firefox

see this jsfiddle example in firefox

＆＃13;

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;
}

＆＃13;

<body>
    <header id="header" class="header sidbar">

        <nav>
            <button class="btn"><span></span></button>

        </nav>
    </header>
    <!-- /header -->


</body>

＆＃13;

Answer 1

问题在于top:50%的CSS中的span。它没有在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而不是按钮，则需要考虑将跨度放在中心，但是button元素会自动将内容垂直居中。通过指定您希望顶部为50％，FF将50％添加到当前居中位置。

删除top时

工作示例：

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

＆＃13;

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;
}

＆＃13;

<body>
  <header id="header" class="header sidbar">

    <nav>
      <button class="btn"><span></span></button>

    </nav>
  </header>
  <!-- /header -->


</body>

＆＃13;

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

的更多信息

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

1 个答案: