asp.net - なぜこのロード GIF レイアウトの問題

Question

CSS :

.smallLoaderBackground
{
    background-image: url('loaderBackground.gif') !important;
    background-position: center center;
    background-repeat: no-repeat;
    position: fixed;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 50px;
    margin: -25px 0 0 -25px;
    z-index: 500;
    text-align: center;
    vertical-align: middle;
}

HTML :

<asp:UpdateProgress runat="server" ID="UpdateProgress1" AssociatedUpdatePanelID="upForm">
    <ProgressTemplate>
        <div class="smallLoaderBackground">
            <img id="loaderGif" style="padding-top: 9px;" alt="Loader" src="Styles/please-wait.gif" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

何らかの奇妙な理由で、差分ブラウザーで異なる結果が得られます。

IE は完璧に動作します:

ここに画像の説明を入力

Chrome は見栄えが悪く、ページを中央に配置するのではなく、ページの下部に配置し、背景がありません:

ここに画像の説明を入力

Opera Mobile は IE のようにきれいに見えます。しかし、3GS の safari は ie と chrome のクロスのように見えます。GIF は真ん中にありますが、背景はありません。

これを修正するにはどうすればよいですか?

score 3 · Accepted Answer

まず第一に、他の人が指摘したように、コードを適切にデバッグするには、.NET ソースコード以上のものを提供する必要があります。将来、可能であれば、 JSFiddleで問題のモックアップ例を作成してください。これにより、特定の問題を特定しやすくなります。

次に、より標準に準拠したブラウザーでアプリケーション/ソリューションを開発する必要があります。IE は、ブラウザーの中で黒い羊として知られていますが、それには十分な理由があります。
クロスブラウザーソリューションを開発する上で、IE での外観に依存するのは良くありません。

第 3 に、オーバーレイを画面全体に表示したい場合を除き、オーバーレイを固定するべきではありません。オーバーレイは、親要素に対して絶対でなければなりません。また、親要素を追加position: relative;したことを確認してください。そうしないと、絶対配置がうまくいきません。なぜあなたもvertical-alignそこにいるのかわかりませんが、見た目だけでは、さまざまなプロパティが何のためにあるのか本当にわかりません. そのためには、 W3CとQuirksmodeを参照してください。

要約すると、より関連性の高いコードを提供してください。IEは最悪です。絶対的な位置に配置してください。

ただし、解決策がないままにしておくわけにはいかないので、単純なローダーオーバーレイを作成する方法の例を次に示します。これは、Chrome と JSFiddle を使用して開発されました。

JSFiddle の例| コード

CSS

.up-form-loader-container{
    display: none;
}

.up-form-loader-container,
.up-form-loader-overlay{
    width: 100%;
    height: 100%;
}

.up-form-loader-container,
.up-form-loader-overlay,
.up-form-loader-img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.up-form-loader-overlay{
    background-color: white;
    opacity: 0.5;
}

.up-form-loader-img{
    z-index: 2;
    background-color: #4d1228;
    padding: 2px;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
    top: 50%; left: 50%;
    margin-left: -32px; margin-top: -32px;
}

#container h1{
    font-size: 20px;
    padding-bottom: 10px;
}
#container h2{
    font-size: 11px;
}

#container{
    /*Centering the container for display purposes*/
    position: absolute;
    top: 50%; left: 50%;
    margin-top: -225px; margin-left: -145px;
    /*--------------------------------------------*/
    width: 250px;
    padding: 10px 20px 20px 20px;
    border: 1px solid #51182d;
    background-color: #f9f9f9;
    box-shadow: 2px 2px 2px 1px #bfbfbf; -moz-box-shadow: 2px 2px 2px 1px #bfbfbf; -webkit-box-shadow: 2px 2px 2px 1px #bfbfbf;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}

.group{
    position: relative;
    margin-top: 22px;
    border: 1px solid white;
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
    box-shadow: 0px 0px 0px 1px #a3bccc;
    padding: 12px 8px 4px 8px;
}

.first-group{
    margin-top: 12px;
}

.group-title{
    position: absolute;
    height: 20px;
    left: 6px;
    top: -12px;
    padding: 0 4px;
    color: white;
    background-color: #4d1228;
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}

.group-submit{
    text-align: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid gray;
}

#email-adr{
    width: 100%;
}

#req-submit{
    padding: 2px 12px;
}

#cancel-submit, #cancel-submit:visited{
    color: darkblue;
    text-decoration: none;
    margin-left: 20px;
}

#cancel-submit:hover{
    text-decoration: underline;
}

HTML

<div id="container">
    <div class="up-form-loader-container">
        <div class="up-form-loader-overlay"></div>
        <img class="up-form-loader-img" src="http://www.newmoney.gov/WorkArea/images/application/loading_big.gif" width="64" height="64" />
    </div>
    <h2>ShadowCorp<sup>®</sup> Delivery on demand</h2>
    <h1>Price listing request</h1>
    <div class="first-group group">
        <div class="group-title">Items</div>
        <ul class="group-list">
            <li><label><input type="checkbox" /> Rubber mounting</label></li>
            <li><label><input type="checkbox" /> Bellows</label></li>
            <li><label><input type="checkbox" /> Rings</label></li>
            <li><label><input type="checkbox" /> Hoses and boot</label></li>
            <li><label><input type="checkbox" /> Filters</label></li>
            <li><label><input type="checkbox" /> Gaskets</label></li>
            <li><label><input type="checkbox" /> Mounts</label></li>
            <li><label><input type="checkbox" /> Oil seals</label></li>
            <li><label><input type="checkbox" /> TVD Dampers</label></li>
        </ul>
    </div>
    <div class="group">
        <div class="group-title">Additional information</div>
        <ul class="group-horiz-list">
            <li><label><input type="checkbox" checked="checked" /> Bracket costs</label></li>
            <li><label><input type="checkbox" /> X-ref</label></li>
        </ul>
    </div>
    <div class="group">
        <div class="group-title"><label for="email-adr">E-mail address</label></div>
        <input type="textbox" id='email-adr'/></label>
    </div>
    <div class="group-submit">
        <input id="req-submit" type="submit" value="Send" />
        <a href="#cancel" id="cancel-submit">cancel</a>
    </div>
</div>

結果：ブラウザ比較

asp.net - なぜこのロード GIF レイアウトの問題

1 に答える 1

JSFiddle の例| コード

Related

Reference