如何修复Firefox中轮播图元素重叠的问题？

前端开发 2026-07-09

我正在通过严格按照Coding2GO的视频在HTML/CSS中制作一个轮播：https://www.youtube.com/watch?v=KD1Yo8a_Qis

在视频中，轮播里有6 个元素在旋转。

下面是我复现的代码：https://codepen.io/editor/Zibola/pen/019e229f-dce5-778e-a69a-ddfd2f41f2a1

我也把它放在这里：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pen</title>
  </head>
  <body>
        <div class="carousel">
            <div class="group">
                <div class="card">1</div>
                <div class="card">2</div>
                <div class="card">3</div>
                <div class="card">4</div>
                <div class="card">5</div>
                <div class="card">6</div>
            </div>
            <div aria-hidden class="group">
                <div class="card">1</div>
                <div class="card">2</div>
                <div class="card">3</div>
                <div class="card">4</div>
                <div class="card">5</div>
                <div class="card">6</div>
            </div>
        </div>
    <script src="./script.js"></script>
  </body>
</html>

.carousel {
  margin: 100px auto;
  width: 90%;
  border: 5px solid red;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  animation: spin 5s infinite linear;
  padding-right: 1em;
}
.card {
  flex: 0 0 2em;
  height: 2em;
  padding: 1em;
  background: cornflowerblue;
  font-size: 3rem;
  border-radius: .2em;
  text-align: center;
  align-content: center;
}
@keyframes spin {
  from { translate: 0;}
  to { translate: -100%;}
}

如你所见，第一组中的第5 和第6 个元素被第二组中的第1 和第2 个元素遮挡，因此我们实际上只看到前4 个元素在旋转。

然而，像视频那样，我们应该能看到全部6 个元素。

看起来这个问题在Firefox上出现，在Chrome上似乎没有。

我到底少了什么？我几乎把视频里展示的代码重新写了一遍，所以我不明白！

我知道这是因为在我的代码中，分组所占的宽度比子元素要小，但为什么会这样？

解决方案

问题似乎出在：.card{flex: 0 0 2em;...}

把你的规则改成：

.card {
  flex: 0 0 auto;
  width:2em;
  height: 2em;
  padding: 1em;
  background: cornflowerblue;
  font-size: 3rem;
  border-radius: .2em;
  text-align: center;
  align-content: center;
}

应该可以在Firefox上修复它。

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。