jquery - 透明な背景が IE9 で正しく機能しない

Question

基本的にライトボックスのデモです。コードはこちらから。リンク「パネルを表示」をクリックして、フォームをポップアウトしたい。Firefox では問題なく動作しますが、IE9 では正しく動作しません。

HTML コードは非常に単純です。

<body>
<a id="show-panel" href="#">Show Panel</a>

 <div id="lightbox-panel">
    <h2>Lightbox Panel</h2>
    <p>You can add any valid content here.</p>
    <p align="center">
    <a id="close-panel" href="#">Close this window</a>
    </p>
    </div><!-- /lightbox-panel -->

    <div id="lightbox"> </div><!-- /lightbox -->
    </body>

CSS:

<style type="text/css">

#lightbox {
display:none;
opacity:0.9;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
background-color: #FFCC66;
    }

#lightbox-panel {
display:none;
position:fixed;
top:180px;
left:50%;
margin-left:-200px;
width:450px;
border:2px solid #CCCCCC;
z-index:1001;
background-color: #999900;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
    }

.show-panel {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
    }
    </style>

JQuery コード:

$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
})
 $("a#close-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeOut(300);
 })

Firefox での効果:

IE9 での効果: IE9

透明な背景だけでなく、ライトボックスの位置も正しくありません。

手伝ってくれてありがとう。

コード全体:

https://skydrive.live.com/?cid=03a8bb9eaeeff1db#cid=03A8BB9EAEEFF1DB&id=3A8BB9EAEEFF1DB!234

score 1 · Accepted Answer

問題

Jashwantが言ったように、それはdoctypeの問題かもしれません。そして、それがまさに問題です。<html>タグの前に HTML 5 doctype を追加すると修正されました。

<!DOCTYPE html>

IE は他の一部のブラウザーほどスマートではないことに注意してください。したがって、Web ページには正しい設定を使用する必要があります。

<!DOCTYPE html>

<html>
  <head>
  </head>

  <body>
  </body>
</html>

このJsFiddleに取り組んでいるようです。

あなたの側の JsFiddle でも問題なく動作すると言ったのは確かです。それで、HTML全体をペーストビンpasteToolのようなものに投稿できますか? これにより、これを簡単に修正できます。

ただし、指摘したいことの1つは、ライトボックスを垂直方向に中央に配置する方法が均一ではないということです。

ライトボックスの幅は、半分にしたいほどです450px。margin-left450 の半分は 225 なので、新しいmargin-left値は -225px です。

これにより、完全に中央に配置されます。また、JavaScript を使用してオブジェクトの幅を取得し、そこで計算を行うことも好きです。もう少し作業を行う必要があるため、ページの読み込みに少し時間がかかりますが、かなりうまく機能すると思います.

ライトボックスがその HTML ページで機能していないように見えることを考えると、これは少し話題から外れていますが、これも役立つかもしれないと思いました。HTML をもう一度確認してください。Google Chrome などの他のブラウザーでは修正できるのに IE では修正できない問題がある可能性があります。

ああ、ライトボックスを水平方向に中央揃えにしたい場合は、同じ方法を使用できます。高さを半分にして、その負の形をmargin-top

score 1 · Accepted Answer

問題になる場合がありdoctypeます。

これをあなたの前に置きます<html>

<!DOCTYPE html>

また、

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

headセクションで。

score 0 · Accepted Answer

それは私のために働いているようです。他に問題の原因がないと確信していますか?

ライブデモ

html タグと body タグの高さと幅も設定することをお勧めします。これが原因かどうかはわかりませんが、参考になると思います。

html, body {
    height:100%;
    width:100%;
}

html ファイルで提供されたコンテンツの例を作成しましたが、正しく動作しているようです。もっと情報が必要だと思います。これらは私がhtmlファイルに入れた内容です。

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            #lightbox {
                display:none;
                opacity:0.9;
                filter:alpha(opacity=90);
                position:fixed;
                top:0px;
                left:0px;
                min-width:100%;
                min-height:100%;
                z-index:1000;
                background-color: #FFCC66;
            }

            #lightbox-panel {
                display:none;
                position:fixed;
                top:180px;
                left:50%;
                margin-left:-200px;
                width:450px;
                border:2px solid #CCCCCC;
                z-index:1001;
                background-color: #999900;
                padding-top: 10px;
                padding-right: 15px;
                padding-bottom: 10px;
                padding-left: 15px;
            }

            .show-panel {
                font-family: Arial, Helvetica, sans-serif;
                font-size: xx-large;
            }
        </style>
    </head>
    <body>
        <a id="show-panel" href="#">Show Panel</a>

        <div id="lightbox-panel">
            <h2>Lightbox Panel</h2>

            <p>You can add any valid content here.</p>
            <p align="center">
                <a id="close-panel" href="#">Close this window</a>
            </p>
        </div><!-- /lightbox-panel -->

        <div id="lightbox"> </div><!-- /lightbox -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $("a#show-panel").click(function(){
                $("#lightbox, #lightbox-panel").fadeIn(300);
            });

            $("a#close-panel").click(function(){
                $("#lightbox, #lightbox-panel").fadeOut(300);
            })
        </script>
    </body>
</html>

私のテストをあなたが私たちに与えたものと比較すると、doctypeがありません. doctype を追加するとすぐに、すべてが適切に機能しました。

jquery - 透明な背景が IE9 で正しく機能しない

3 に答える 3

問題

Related

Reference