html - FireFox 特别是浏览器兼容性问题

Question

有些元素看起来与它们在 Firefox 上的预期外观不同，但在其他任何地方看起来都很好。

这是它应该看起来的样子(Chrome):

这是它在 Firefox 上的样子:

在 Firefox 上，为了使图像的宽度达到我想要的效果，我必须将图像的宽度设置为 200% 而不是 40%。我尝试寻找特定的 -moz- 命令，但它们不起作用。我希望 Firefox 版本与 Chrome 版本相同。我该如何解决这个问题。

在此先感谢您的帮助。

这是我的代码:HTML:

 <div class="about-container appear appear-hidden" id="about-scroll">
  <h1><span>About Me</span></h1>
  <div class="about-children-container">
    <div class="about-p-container">
      <p>
        I'm a self taught developer with over 2 years experience going to 3
        years. I'm a driven and productive web developer that is passionate
        about solving complex problems, bringing about solutions for those
        problems and creating beautiful looking websites. I'm also
        knowledgeable about concepts such as OPP, Asynchronous Javascript,
        DOM manipulation, working with an architecture, working with APIs and many more.
      </p>

      <p>
        For fun I like playing drums and other musical instruments, and I
        love reading whenever I can.
      </p>
    </div>
    <img src="img/me.jpg" />
  </div>
</div>

CSS:

.about-container {
  width: 60%;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 20px;
}

.about-children-container {
  display: flex;
  justify-content: space-between;
}

.about-p-container p {
  padding: 5px;
  margin-right: 7px;
  filter: blur(3px);
}

.about-children-container img {
  width: 40%;
  margin-left: 7px;
  border-radius: 50%;
}

Answer 1

Chrome 似乎将图像的固有尺寸考虑到了其 flex 尺寸。我在 flex 布局算法中找不到任何理由，所以我怀疑 Firefox 的行为是符合规范的。然而，所讨论的算法并不是最容易遵循的。

由于您没有提供实际图像或其固有尺寸，因此该问题无法完全重现。但是似乎添加

.about-children-container img {
  max-width: min-content;
  flex-shrink: 0;
}

对 Chrome 的布局没有影响，并使 Firefox 的布局具有类似的行为。所以试试这个:

.about-container {
  width: 60%;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 20px;
}

.about-children-container {
  display: flex;
  justify-content: space-between;
}

.about-p-container p {
  padding: 5px;
  margin-right: 7px;
  filter: blur(3px);
}

.about-children-container img {
  width: 40%;
  max-width: min-content;
  flex-shrink: 0;
  margin-left: 7px;
  border-radius: 50%;
}

 <div class="about-container appear appear-hidden" id="about-scroll">
  <h1><span>About Me</span></h1>
  <div class="about-children-container">
    <div class="about-p-container">
      <p>
        I'm a self taught developer with over 2 years experience going to 3
        years. I'm a driven and productive web developer that is passionate
        about solving complex problems, bringing about solutions for those
        problems and creating beautiful looking websites. I'm also
        knowledgeable about concepts such as OPP, Asynchronous Javascript,
        DOM manipulation, working with an architecture, working with APIs and many more.
      </p>

      <p>
        For fun I like playing drums and other musical instruments, and I
        love reading whenever I can.
      </p>
    </div>
    <img src="https://placekitten.com/400/300" />
  </div>
</div>