如何标准化 CSS-animated Bootstrap 5 Navbar toggler button across browsers 中条形之间的垂直间距

Question

我正在尝试在 Bootstrap 5 中实现 this 动画自定义 Navbar 切换按钮的改编。但是，构成切换按钮的三个栏之间的间距在不同的浏览器中看起来不同.

我发现 .navbar-toggler.collapsed .top-bar 中 -15px 的 margin-top 和 .navbar-toggler.collapsed .bottom-bar 中 15px 的 margin-top 在 Chrome 和 Firefox（请参阅下面的放大屏幕截图）。

Navbar in Chrome, Navbar in Firefox

但是，Safari 中的相同值会产生间距过大的栏（请参阅下面的放大屏幕截图）。

Navbar in Safari

有没有一种方法可以跨浏览器标准化条形之间的垂直间距？我是 Web 开发的新手，非常感谢社区可以提供的任何帮助。谢谢！

代码如下

/* "./static/css/styles_navbar_toggler.css" */

.navbar-toggler {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  position: relative;
  transition: .5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggerl:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}

.navbar-toggler span {
  margin: 0;
  padding: 0;
}

.toggler-icon {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #9b9d9e;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.middle-bar {
  margin-top: 0px;
}

/* When toggler is clicked */

.navbar-toggler .top-bar {
  margin-top: 0px;
  transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
  margin-top: 0px;
  transform: rotate(-135deg);
}

/* When navbar is collapsed */

.navbar-toggler.collapsed .top-bar {
  margin-top: -15px;
  transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
  margin-top: 15px;
  transform: rotate(0deg);
}

<!DOCTYPE html>

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link href="/static/css/styles_navbar_toggler.css" rel="stylesheet">
</head>

<body>
  <!-- Popper and Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

  <header>
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- For custom toggler, (a) added "collapsed d-flex d-lg-none flex-column justify-content-around" to "navbar-toggler" class, -->
        <!-- (b) replaced <span class="navbar-toggler-icon"></span> with the three lines below, and -->
        <!-- (c) defined new "navbar-toggler" class in "styles_navbar_toggler.css" -->

        <button class="navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="toggler-icon top-bar"></span>
            <span class="toggler-icon middle-bar"></span>
            <span class="toggler-icon bottom-bar"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <main>
    Hello world
  </main>
</body>

</html>

Answer 1

您好，欢迎来到 Whosebug

浏览器之间的差异

浏览器是由不同的公司制造和开发的，因此对于正确的 'default' 应该是什么，众说纷纭。因此，根据这些默认设置，某些内容在不同的浏览器上可能看起来有所不同。

您正在使用 bootstrap，并且 bootstrap 带有 'css-reset' 来尝试设置自己的默认值以确保它在所有浏览器上看起来都一样。您可以阅读更多相关内容 reboot，但本质上这应该已经解决了您的问题。

缩放和单位 'rem' 对比 'px'

缩放级别对单位的影响不同。浏览器可以通过 css 规则应用默认缩放，例如 font-size: 150%.
取决于事物的风格。缩放px单位影响不大，缩放rem影响大
有关详细信息，请参阅此 answer。
这可能是因为您的 safari 浏览器被放大了，或者通过 OS

设置了 increased/decreased 字体大小

使用 `translate` 而不是边距来定位条形图

您正在使用 margin-top: -15px rule 定位这些条。尝试使用 transform css 规则设置任何动画元素的样式通常有利于性能（就像您已经在进行旋转一样）
您可以应用多个转换规则，例如

.navbar-toggler.collapsed .top-bar { 
  transform: rotate(0deg) translateY(-10px);
}

此处，translateY将在Y平面上移动元素。

/* "./static/css/styles_navbar_toggler.css" */

.navbar-toggler {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  position: relative;
  transition: .5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggerl:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none !important;
  border: 0;
}

.navbar-toggler span {
  margin: 0;
  padding: 0;
}

.toggler-icon {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #9b9d9e;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.middle-bar {
  margin-top: 0px;
}

/* When toggler is clicked */

.navbar-toggler .top-bar {
  transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
  transform: rotate(-135deg);
}

/* When navbar is collapsed */

.navbar-toggler.collapsed .top-bar { 
  transform: rotate(0deg) translateY(-10px);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0deg) translateY(10px);;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link href="/static/css/styles_navbar_toggler.css" rel="stylesheet">
</head>

<body>
  <!-- Popper and Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

  <header>
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- For custom toggler, (a) added "collapsed d-flex d-lg-none flex-column justify-content-around" to "navbar-toggler" class, -->
        <!-- (b) replaced <span class="navbar-toggler-icon"></span> with the three lines below, and -->
        <!-- (c) defined new "navbar-toggler" class in "styles_navbar_toggler.css" -->

        <button class="navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="toggler-icon top-bar"></span>
            <span class="toggler-icon middle-bar"></span>
            <span class="toggler-icon bottom-bar"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <main>
    Hello world
  </main>
</body>

</html>

如何标准化 CSS-animated Bootstrap 5 Navbar toggler button across browsers 中条形之间的垂直间距

How to standardize vertical spacing between bars in CSS-animated Bootstrap 5 Navbar toggler button across browsers

html

css

navbar

css-animations

bootstrap-5

浏览器之间的差异

缩放和单位 'rem' 对比 'px'

使用 `translate` 而不是边距来定位条形图

如何标准化 CSS-animated Bootstrap 5 Navbar toggler button across browsers 中条形之间的垂直间距

How to standardize vertical spacing between bars in CSS-animated Bootstrap 5 Navbar toggler button across browsers

html

css

navbar

css-animations

bootstrap-5

浏览器之间的差异

缩放和单位 'rem' 对比 'px'

使用 translate 而不是边距来定位条形图

使用 `translate` 而不是边距来定位条形图