Mozilla Firefox 上的 CSS flex 框大小错误问题
Posted
技术标签:
【中文标题】Mozilla Firefox 上的 CSS flex 框大小错误问题【英文标题】：CSS flex box wrong size issue on Mozilla Firefox 【发布时间】：2021-07-12 22:08:55 【问题描述】：我一直在为我的一个应用程序开发 Web 仪表板，最近遇到了 Flexbox 缩放问题，该问题似乎只出现在 Firefox 上。
我正在使用一个标题，其中包含左右对齐的两个 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)
【问题讨论】：
您的小提琴和上面的代码 sn-p 都可以在 Firefox 中正常工作，因此您的问题一定是由其他原因引起的。在标题的左侧框中是否有min-width、width 或 flex-basis 设置？
@Johannes 我已经在本地尝试过代码，但它确实在 Firefox 中不起作用（fiddle 和 sn-p 也对我有用）。我假设包装代码的 sn-p 和小提琴以某种方式解决了我的答案中描述的问题？！
顺便说一句：您缺少 position: relative 设置 form 或 #left-header 以使其用作绝对定位下拉列表的位置参考。这四个提交按钮当然不是有效的 HTML - 你应该找到另一个解决方案。
【参考方案1】：
免责声明：我不完全确定我的解释是否 100% 正确，但下面的解决方案似乎可以解决问题。
问题似乎是没有为正文、容器或图像设置绝对高度。
尽管图像的高度在 Firefox 中似乎是正确的，但在计算所需宽度时似乎使用了图像的原始宽度（如果您注释掉 .rounded-icon height: 80%; 并且容器的宽度不会改变，则可以看到这一点)，最终导致容器宽度错误。
所以要解决这个问题，您可以简单地为正文、容器或图像指定一个绝对高度（vh 也可以）：
.rounded-icon
height: 30px; /* instead of 80% */
/* OR */
header
height: 8vh; /* instead of 8% */
/* OR */
body
height: 100vh;
【讨论】：
以上是关于Mozilla Firefox 上的 CSS flex 框大小错误问题的主要内容，如果未能解决你的问题，请参考以下文章
CSS min-height 不适用于 Mozilla firefox