我无法确定 Firefox 上奇怪的 CSS 行为的原因

问题描述 投票:0回答:1

我是一名崭露头角的初级开发人员,我一直在整理我的第一个作品集。我正在慢慢准备最终版本的组合和上传,出于测试目的,我已将其 WIP 版本上传到我的共享主机服务上。 然而我面临着一个奇怪的问题: 在检查页面在不同浏览器(Chrome、Opera、Edge 和 Firefox)上的表现后,页面看起来很好,直到我用 Mozilla Firefox 进行检查。

我一直试图找出原因,但仅在 Firefox 和 Firefox 上,该网站似乎有一个空白,延伸到页面右侧并超出了任何元素。我检查了控制台以查看哪个元素可能导致它,虽然我发现一个初始宽度可能是原因的元素,但调整其宽度没有任何改变。

我不想把它写成“这只是 Firefox 的事情”,这是我第一次看到这种行为,特别是它纯粹发生在该浏览器上。

我可以看到原因的元素可能是项目容器 div 元素:

*, ::before, ::after {
  box-sizing: border-box;
}
.BackgroundImage {
  max-width: 100%;
  width: 100vw;
  display: flex;
}

.BackgroundImage img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.project-container {
  min-width: 80%;
  position: relative;
  right: 85%;
}
<div class="BackgroundImage">
  <img alt="Background-Image" src="https://personalfolio.apoillot.fr/storage//images/Homeimage.jpg">
  <div class="project-container">(whatever)</div>
</div>

您可以在以下地址查看不同浏览器上的页面,这样您就可以看到 Firefox 和其他浏览器上发生的情况的差异:https://personalfolio.apoillot.fr/home 我很感激任何可以让我识别并纠正问题的帮助,我真的无法自己解决......

css firefox
1个回答
0
投票

Firefox 似乎为第二个 Flex“单元格”(

.project-container
)分配了空间,然后您使用位置将其拉回,并将分配的空间留在那里。

在您的布局上下文中,这样做没有多大意义;您的

.BackgroundImage
包装纸可能首先不应该是
flex
容器。

© www.soinside.com 2019 - 2024. All rights reserved.