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

问：

我是一名初出茅庐的初级开发人员，我一直在整理我的第一个作品集。我正在慢慢准备一个最终版本来组合和上传，出于测试目的，我已经在我的共享主机服务上上传了它的 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="" src="https://personalfolio.apoillot.fr/storage/images/Homeimage.jpg">
  <div class="project-container">(whatever)</div>
</div>

您可以在以下地址查看不同浏览器上的页面，因此您可以看到 Firefox 和其他浏览器上的差异： https://personalfolio.apoillot.fr/home 我希望任何帮助能够让我识别和纠正问题，但我真的无法自己弄清楚......

CSS 火狐浏览器

.wrap {
  border: solid red;
  overflow: auto;
  position: relative;
  width: 200px;
  text-align: center;
}

.flex {
  display: flex;
}

.flex__full {
  background-color: blue;
  width: 100%;
  flex-shrink: 0;
}

.flex__abs {
  background-color: maroon;
  min-width: 50px;
  position: relative;
  right: 60px;
}

html {
  color-scheme: dark;
}

<div class="wrap">
  <div class="flex">
    <div class="flex__full">a</div>
    <div class="flex__abs">b</div>
  </div>
</div>

火狐浏览器：

边缘：

具有非包装内联块的 MRE：在 Firefox 和 Chrome （Edge）中结果相同：

.wrap {
 border: solid red;
 overflow: auto;
 position: relative;
 width: 200px;
 text-align: center;
 white-space: nowrap;
}

span { display: inline-block;}
.full {
  background-color: blue;
  width: 100%;
  flex-shrink: 0;
}

.abs {
  background-color: maroon;
  min-width: 50px;
  position: relative;
  right: 60px;
}

html { color-scheme: dark; }

<div class="wrap"
 ><span class="full">a</span
 ><span class="abs">b</span
></div>

火狐浏览器：

边缘：

原始设计的替代方法（绝对定位伪元素的背景图像）：

html {
 color-scheme: dark;
 background-color: black;
 color: white;
 position: relative;
}
body {
 margin: 0;
 min-height: 100vh;
 padding: 1em;
}
html::before {
 content: '';
 top: 0;
 left: 0;
 right: 0;
 height: 100%;
 min-height: 100vh;
 position: absolute;
 z-index: -1;
 background-image: url('https://personalfolio.apoillot.fr/storage/images/Homeimage.jpg');
 background-size: cover;
 background-repeat: no-repeat;
 background-position: top center;
 animation: 2s bg;
}
@keyframes bg {
 from {opacity: 0; }
 to { opacity: 1; }
}
div {
 width: 30ch;
 text-align: center;
 margin: 10ch auto 30ch;
 background-color: tan;
 color: black;
 padding: 3ch;
}

<div>(whatever)</div>
<div>(whatever)</div>
<div>(whatever)</div>

我显然不是 CSS 中最好的，我不对背景图像使用绝对的原因是，在我添加项目的另一个页面上，我正在寻找一种效果，当您继续向下滚动（没有分页）时，背景图像仍然存在，从记忆来看，使用绝对背景图像这样做不会达到结果。至于掩膜方法，我承认我不知道什么是完全诚实的

上一个：Angular：在 Firefox 中拖动滚动条不会显示现在可见的内容，直到不再按下鼠标主键

下一个：Firefox 中：has 的解决方法（不使用 JavaScript）[已关闭]

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

I cant identify the cause of a weird CSS behavior on Firefox

评论

评论