Html Firefox在css边距填充中表现出奇怪的行为不起作用

因此，我只在mozilla Firefox中存在对齐问题。所有其他浏览器都显示了良好的结果。实际上，问题仍然是loadingImage（bunny）对Firefox中的maring bottom参数没有任何影响

 html, body {

       margin:0; padding:0;
       background-color: #000000;
}

#myCanvas {
    background-color: black;
    position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#loadingImage{
        color:#90B3DF;
        position: absolute;    
        padding-left: 00px;
        margin: auto;
        top:0;
        bottom: 220px;
        left: 0;
        right: 0;
        margin: auto;

    }

而html代码是

加载

所有浏览器都在加载栏上方放置兔子图像，但mozilla显示了异常，可能是这样的图像

---

对于您的案例，您只需要设置绝对定位元素的顶部或底部。在这种情况下，这将是#加载图像

你有顶部和底部两套。如果您试图将其定位在距离#loadingImage位置相对的顶部220px的位置，请使用top。否则使用底部，并移除顶部。来自MDN：

• 如果同时指定了“顶部”和“底部”（技术上不是“自动”），则“顶部”将获胜
• 如果同时指定了左和右，则当方向为ltr（英语、水平日语等）时，左赢，当方向为rtl（波斯语、阿拉伯语、希伯来语等）时，右赢

这并不是说你不能同时使用顶部和底部（甚至是左右）。但是，您只会在您想要填充正在设置的两个位置之间的空间时才这样做

请看这里：

还有其他一般提示：

• 内联样式通常是个坏主意。我建议在css文件中处理演示文稿。随着时间的推移，使项目更易于维护

• 填充：0px是所有必要的，不必使用00px

• 尽量保持HTML和CSS标记的间距整齐。随着时间的推移，这还可以追溯到拥有一个更易于维护的项目。例如：

这更容易阅读：

#myCanvas {
    background-color: black;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

比：

---

嘿@Devin，你可以同时指定左侧和右侧等。它将决定绝对定位框的大小，并且非常有用，因为填充不会像使用百分比时那样产生干扰。编辑我的答案以更具体地了解它的实际工作方式。如果顶部和底部都设置好，顶部将始终获胜。同样，如果左右双方都被设定，左派将永远获胜。根据MDN啊，我想你需要重读一遍！它说“除了刚才描述的绝对定位元素填充可用空间的情况”。如果您尝试一个测试，您将看到它的尺寸发生了变化。感谢您提供的提示。您知道为什么其他浏览器显示的是预期加载的图像而不是mozilla firefox吗。@robC现在应该全部设置好了。

#myCanvas {
    background-color: black;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#myCanvas {
    background-color: black;
    position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}