时间戳

首页 > 解决方案 > 使用 flex 时，铬合金中会出现左侧填充；但不是在Firefox中

html - 使用 flex 时，铬合金中会出现左侧填充；但不是在Firefox中

问题描述

我使用 Manjaro 作为操作系统，所以我不了解 Chrome。我有这个问题，使用 flexbox 后左侧出现填充，这个问题只发生在 Chromium 中，而不发生在 Firefox 中。

我不知道问题出在哪里（因为除了可访问性和响应性之外，我不知道代码是否有任何问题，但这是因为我还没有完成编码）

这是我的html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="./styles.css" />

    <title>Frontend Mentor | Stats preview card component</title>
  </head>
  <body>
    <main class="container">
      <div class="hero-image">
        <img src="./images/image-header-desktop.jpg" alt="" srcset="" />
      </div>
      <div class="content">
        <div class="main-header">
          Get <span>insights</span> that help your business grow.
        </div>
        <div>
          Discover the benefits of data analytics and make better decisions
          regarding revenue, customer experience, and overall efficiency.
        </div>
        <div>
          <div>
            <div>10k+</div>
            <div>companies</div>
          </div>
          <div>
            <div>314</div>
            <div>templates</div>
          </div>
          <div>
            <div>12m+</div>
            <div>queries</div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

这是CSS

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap");
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(233, 47%, 7%);
  font-size: 15px;
}

.container {
  background-color: hsl(244, 38%, 16%);
  display: flex;
  flex-direction: row-reverse;
}

.main-header {
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

span {
  color: hsl(277, 64%, 61%);
}
.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

ps：这是frontendMentor的挑战！

标签： htmlcssflexboxfrontendchromium

解决方案

推荐阅读