0

所以我只有在 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

4

1 回答 1

1

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

你有顶部和底部的集合。如果您试图将其定位在距离 #loadingImage 位置相对位置的顶部 220 像素处，请使用 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;
}
于 2013-08-13T15:06:18.423 回答