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 (ペルシア語、アラビア語、ヘブライ語など) の場合は右が優先されます。」

これは、同時に上と下を使用できないと言っているわけではありません (さらに言えば、左と右も)。ただし、設定している 2 つの位置の間のスペースを埋めたい場合にのみ、これを行います。

ここを読む: 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 に答える