我是一名崭露头角的初级开发人员,我一直在整理我的第一个作品集。我正在慢慢准备最终版本的组合和上传,出于测试目的,我已将其 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 我很感激任何可以让我识别并纠正问题的帮助,我真的无法自己解决......
Firefox 似乎为第二个 Flex“单元格”(
.project-container
)分配了空间,然后您使用位置将其拉回,并将分配的空间留在那里。
在您的布局上下文中,这样做没有多大意义;您的
.BackgroundImage
包装纸可能首先不应该是 flex
容器。