CSS Mozilla Firefox 上的弹性框尺寸错误问题

Question

我一直在为我的一个应用程序开发 Web 仪表板，最近遇到了 Flexbox 缩放问题，该问题似乎只出现在 Firefox 上。

我正在使用 header，其中包含左右对齐的两个 div。左右 div 的显示类型为 inline-flex，这使得框缩小到其内容的大小。但是，这似乎不适用于 Mozilla Firefox。我测试过并且都显示正确行为的其他浏览器是 Chrome、Safari（移动）、Internet Explorer 和 Edge。

我该如何解决甚至修复这个问题？在当前页面中，我添加了彩色框以突出显示错误的计算尺寸。

Here's an image of a comparison between Chrome (left) and Firefox (right)

HTML:

body {
  background-color: #2C2F33;
  color: #99AAB5;
  margin: 0px;
  font-size: 15px;
}

header {
  width: 100%;
  height: 8%;
  background-color: #23272A;
  margin: 0px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px dashed blue;
  box-sizing: border-box;
}

.dropdown {
  display: block;
  border: 2px dotted green;
  box-sizing: border-box;
}

.dropdown-button {
  background-color: #7289DA;
  color: white;
  padding: 10px;
  font-size: 15px;
  border: none;
  border-radius: 3px;
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #677bc4;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  /*min-width: 160px;*/
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content input {
  color: black;
  background-color: #2C2F33;
  color: #99AAB5;
  padding: 12px 16px;
  text-decoration: none;
  border: none;
  width: 100%;
}

.dropdown-content input:hover {
  background-color: #23272A;
  color: #FFFFFF;
}

.servers {}

.dropdown:hover .dropdown-content {
  display: block;
}

.rounded-icon {
  border-radius: 50%;
  height: 80%;
}

#hltv-logo {
  display: inherit;
}

#useravatar {
  display: inherit;
}

#username {
  display: inherit;
}

#left-header {
  height: 100%;
  display: inline-flex;
  border: 2px dotted red;
  box-sizing: border-box;
  align-items: center;
  min-height: 0;
  min-width: 0;
}

#right-header {
  height: 100%;
  display: inline-flex;
  border: 2px dotted red;
  box-sizing: border-box;
  align-items: center;
  min-height: 0;
  min-width: 0;
}

<html>

<head>
  <link rel="icon" href="favicon.png">
  <title>HLTV Dashboard</title>
  <link rel="stylesheet" href="css/dashboard.css">
</head>

<body>
  <header>
    <div id="left-header">
      <img id="hltv-logo" class="rounded-icon" src="https://cdn.discordapp.com/avatars/224037892387766272/e8147fb1012d23670d61698a9b42f60a.jpg">
      <form method="post" class="dropdown">
        <button class="dropdown-button">Servers</button>
        <div class="dropdown-content">
          <input type="submit" class="servers" name="26700" value="Hardwaretalk"><br><input type="submit" class="servers" name="40218" value="1 Jahr Explosion"><br><input type="submit" class="servers" name="45396" value="the good side of EA"><br>
          <input
            type="submit" class="servers" name="74863" value="Zsunamy"><br> </div>
      </form>
    </div>
    <div id="right-header">
      <img id="useravatar" class="rounded-icon" src="https://cdn.discordapp.com/avatars/224037892387766272/e8147fb1012d23670d61698a9b42f60a.jpg">
      <div id="username">Revilum</div>
    </div>
  </header>


</body>

</html>

Here's a fiddle of the site (Note: I had to change one of the images)

Answer 1

免责声明：我不完全确定我的解释是否 100% 正确，但下面的解决方案似乎可以解决问题。

问题似乎是没有为正文、容器或图像设置绝对高度。虽然图像的高度在 Firefox 中似乎是正确的，但在计算所需宽度时似乎使用了图像的原始宽度（如果注释掉 .rounded-icon{ height: 80%;} 并且容器的宽度不t改变），最终导致容器的宽度错误。

因此，要解决此问题，您只需为主体、容器或图像指定一个绝对高度即可（vh 也有效）：

.rounded-icon {
  height: 30px; /* instead of 80% */
}

/* OR */
header {
  height: 8vh; /* instead of 8% */
}

/* OR */
body {
  height: 100vh;
}

CSS Mozilla Firefox 上的弹性框尺寸错误问题

CSS flex box wrong size issue on Mozilla Firefox

html

css

firefox

flexbox

web