时间戳

首页 > 解决方案 > 为什么 Chrome 和 Firefox 上的图像大小不同

css - 为什么 Chrome 和 Firefox 上的图像大小不同

问题描述

我一直在研究我的个人作品集，并且正在开发 Firefox。有一个使用 flexbox 设置样式的技能部分，其中包含一个徽标及其名称

.abilities-flex-container{
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.abilities-flex-paragraph{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7rem;
  max-height: 5rem;
}
<div class="abilities-flex-container">
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/480px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" class="img-fluid">HTML5
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/340px-CSS3_logo_and_wordmark.svg.png" alt="CSS3" class="img-fluid">CSS
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/128px-Unofficial_JavaScript_logo_2.svg.png" alt="Javascript" class="img-fluid">JavaScript
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/128px-Octicons-database.svg.png" alt="SQL" class="img-fluid">SQL
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/getbootstrap-icon.svg" alt="Bootstrap" class="img-fluid">Bootstrap
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/jquery-icon.svg" alt="jQuery" class="img-fluid">jQuery
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/dotnet-icon.svg" alt="ASP.NET" class="img-fluid">ASP.NET
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/java-icon.svg" alt="Java" class="img-fluid">Java
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/200px-C_Sharp_logo.svg.png" alt="C#" class="img-fluid">C#
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/128px-ISO_C++_Logo.svg.png" alt="C/C++" class="img-fluid">C/C++
    </p>
</div>

我的问题是，在 Firefox 上，图像不会超过 5rem 的最大高度，但在 chrome 上却可以。没有在其他浏览器上测试过，我很难过。如果你检查它，你可以在我的投资组合中看到它

标签： cssgoogle-chromefirefoxflexbox

解决方案

我修好了它

.abilities-flex-paragraph > img {
max-width: 5rem;

}

成功了

推荐阅读