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文件中的演示文稿。随着时间的推移，使您的项目更易于维护。
填充：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;
}

Firefox在css边距填充中显示奇怪的行为无法正常工作

1 个答案: