我找不出Firefox上奇怪的css行为的原因

发布于10月28日

我是一个初出茅庐的初级开发人员，我一直在整理我的第一个投资组合.我正在慢慢地为最终版本的组装和上传做准备，出于测试目的，我已经在我的共享主机服务上上传了它的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 如果能帮我找出问题并纠正问题，我将不胜感激，我自己真的搞不清楚……

.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; }

.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; }

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; }

我找不出Firefox上奇怪的css行为的原因

推荐答案

Css相关问答推荐

如何将另一种自定义位置 colored颜色添加到三角形CSS中？

如何在不重叠侧边栏的情况下尽可能使元素居中？

try 在Jekyll中使用多个SCSS文件时出错

将数据从react组件发送到css文件

为什么 KaTeX 的彩虹文本只能在 Firefox 上运行？

Bootstrap 5 - 更改列顺序时出现问题

CSS 仅过渡背景 colored颜色

在 css 中使用 first-of-type 效果太好了吗？

带有 gatsby-plugin-image 的 bootstrap 卡 ImgOverlay 未按预期调整大小

为什么 em 不将定义的字体大小加倍？

如何在 nth-child 中正确传递 CSS 变量？

你可以在 CSS 中扩展实体(entity)吗？

使用 HTML 和 CSS 滚动表格

如何将 textarea 宽度扩展到父级宽度的 100%(或如何将任何 HTML 元素扩展到父级宽度的 100%)？

如何更改 CSS：JavaScript 中的根 colored颜色变量

rotate3d 速记

如何将页脚(div)与页面底部对齐？

我可以在 css 中指定 maxlength 吗？

背景图像可以大于 div 本身吗？

html元素(div)的全高，包括边框，填充和边距？