html - Firefox 在 css 边距填充中显示奇怪的行为不起作用

Question

所以我只在 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代码是

        <span  id="sp1" style="width: 0%"></span>
        <div>
         <img src="images/loading.gif" alt="Smiley face" id="loadingImage" height="166" width="135">
        <h1 id="bolo">LOADING</h1>

        </div>


</div>  

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

http://i.stack.imgur.com/Ufngd.png

Answer 1

对于您的情况，您只想设置绝对定位元素的顶部或底部。在这种情况下，它将是#loadingImage。

您同时设置了顶部和底部。如果您试图将它定位在距#loadingImage 位置相对的顶部 220px 的位置，请使用 top。否则使用底部，并移除顶部。来自 MDN:

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

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

阅读此处:https://developer.mozilla.org/en-US/docs/Web/CSS/position

还有其他一般提示:

• 内联样式通常不是一个好主意。我建议完全在 css 文件中处理演示文稿。随着时间的推移，使您的元素更易于维护。

• padding: 0px 就够了，不用00px

• 尽量让您的 HTML 和 CSS 标记间隔整齐。随着时间的推移，这也可以追溯到拥有一个更易于维护的元素。示例:

这样更容易阅读:

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