0

すべてのブラウザ（Firefox、Chrome、IE9など）でオーバーレイをクリックすると、onClick関数が起動します。ただし、IE8では、クリックできないようにボックスが存在せず、背後にあるコンテンツが存在するように見えます。これが私のコードです：

HTML：

<div id="pageblock" onclick="closelogin()"></div>
<div id="loginbox"><!--This is where my form is--></div>

CSS：

    #loginbox{
        z-index: 10;
        position: absolute;
        height: 83px;
        top: 105px;
        right: 20px;
        width: 400px
        overflow: hidden;
        padding: 5px;
    }
    #pageblock{
        display: none;
        position: fixed;
        z-index: 7;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #000;
        opacity: 0.6;
    height: 100%;
    width: 100%;
    }

IE8以前のCSS：

#pageblock{
    background: transparent !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
}

ありがとう！

4

1 に答える 1

0

すでに特定したように、エラーは-ms-filterの使用に起因します。フィルタを適用すると、ブラウザが幅と高さを計算する方法が変わるため、クリック可能な領域は、div全体ではなく、ページブロックdiv内のテキストに縮小されるようです。

最も簡単な解決策は、背景画像を使用することです。小さな5px x 5px 60％透明の黒.pngは問題なく機能し、ページ全体のサイズに最小限のフットプリントを追加し、IE7以降のブラウザーをサポートします。ページブロックに設定した幅/高さの宣言。

あなたが投稿したコードには、他にも多くの問題があります。適用したz-indexingは、ログインボックスがページブロックの上部に表示されることを意味します（これは意図的なものですか？）。また、ログインボックスをページの右側から20ピクセルで表示するように指定しましたが、幅を100％に設定しました。これは、100％+ 20pxの合計幅に計算されます。これは、ページに表示される幅よりも広くなります。測定単位の混合は避けてください。正しい位置をパーセンテージベースにして幅宣言から差し引くか、ログインボックスのwithをピクセル単位で指定してください。長期的には、多くの頭痛の種を減らすことができます。

于 2012-10-16T07:54:04.787 に答える