0

このページは Chrome と Firefox で動作しますが、IE では動作しません。ページには画像があり、クリックすると、ページの中央に大きな画像が表示され、背景がグレー表示されます。

http://www.burrardtoastmasters.com/Gallery/2012-Summer.asp

最初は、IE 8 だけに問題があると思っていましたが、IE9 をテストしたところ、問題もありました。画像を再度開くと、画像が中央に配置される場合があります。IE のもう 1 つの問題は、背景が完全にグレー表示されないことです。ブラウザの右側の垂直部分に空白があります。ブラウザのサイズを変更して横方向に長くしても、灰色のセクションは動的にサイズ変更されません。

これは省略された html です。

<div align="center">
<div id="thumbnail">

<A HREF="/Images/Gallery/2012/Summer_Banquet/01.jpg"><img id="800_600" src="/Images/Gallery/2012/Summer_Banquet/01-s.jpg" /></a>
<A HREF="/Images/Gallery/2012/Summer_Banquet/02.jpg"><img id="800_600" src="/Images/Gallery/2012/Summer_Banquet/02-s.jpg" /></a>    
<A HREF="/Images/Gallery/2012/Summer_Banquet/03.jpg"><img id="800_600" src="/Images/Gallery/2012/Summer_Banquet/03-s.jpg" /></a>       
<A HREF="/Images/Gallery/2012/Summer_Banquet/04.jpg"><img id="800_600" src="/Images/Gallery/2012/Summer_Banquet/04-s.jpg" /></a>       
<A HREF="/Images/Gallery/2012/Summer_Banquet/05.jpg"><img id="800_600" src="/Images/Gallery/2012/Summer_Banquet/05-s.jpg" /></a>

</div>              

<div id="largeimage"></div>
<div id="background"></div>

</div>

Jquery セクション:

// center the large image
jQuery.fn.center = function () {

    //document.write("win height: " +  ($(window).height() - this.height() ) / 2+$(window).scrollTop();

    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    return this;
}

$(document).ready(function() {

    // if thumbnail image is clicked, show large image
    $("#thumbnail img").click(function(e){

        // extract the large image's width & height from the image's id attribute
        var strId = this.id;
        var strWidth = strId.substring(0, strId.indexOf("_"));
        var strHeight = strId.substr(strId.indexOf("_") + 1, strId.length - strId.indexOf("_") - 1);

        // set the image's css size attributes
        $("#largeimage").css({"min-width" : strWidth + "px"});
        $("#largeimage").css({"min-height" : strHeight + "px"});

        $("#background").css({"opacity" : "0.7"})
                        .fadeIn("slow");

        $("#largeimage").html("<img src='"+$(this).parent().attr("href")+"' /><br/>")
                   .center()
                   .fadeIn("slow");

        return false;
    });

    // 27 - Escape key
    $(document).keypress(function(e){
        if (e.keyCode == 27){
            $("#background").fadeOut("slow");
            $("#largeimage").fadeOut("slow");
        }
        });

    // if background is clicked, hide large image
    $("#background").click(function(){
        $("#background").fadeOut("slow");
        $("#largeimage").fadeOut("slow");
    });

    // if large image is clicked, hide it
    $("#largeimage").click(function(){
        $("#background").fadeOut("slow");
        $("#largeimage").fadeOut("slow");
    });

});

CSS:

img {
    border: none;
}
#thumbnail img {
    cursor: pointer;
}
#largeimage {
    display: none;
    position: absolute;
    background: #FFFFFF;
    padding: 5px;
    z-index: 10;
    /*min-height: 600px;*/
    /*min-width: 800px; */
    color: #336699;
}
#background{
    display: none;
    position: absolute;
    height: 220%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 1;
}
4

2 に答える 2

1

ページには doctype がないため、検証されず、quirks モードで実行されています。jQuery は quirks モードをサポートしておらず、IE はしばしば css の問題を示します。page を検証するまでは、W3C Validatorを介して実行する必要があります。css またはスクリプトのトラブルシューティングを試みる意味はあまりありません。

html5 docctype を追加するだけで、短期間の検証を修正できるはずです。次に、W3C で壊れたタグを再度確認します。html5 doctype の例については、このページのソースを参照してください。

于 2012-06-25T21:59:36.507 に答える
0

IEでは、画像が完全に読み込まれるまでは画像の高さと幅のように見えますが、

そのため、画像がロードされるまで待ってから中央に配置してください。

または、画像の load イベント内で center() を強制します。

簡単な提案、

 var img = $("<img/><br/>");
img.appendTo("#largeimage").load(function(){
   $(this).parent().center();//for ie center agin after image is loaded
   }).attr( 'src' , $(this).parent().attr("href") );
//for non ie center immedietly
$("#largeimage").center().fadeIn("slow");

粗悪なコード、ただ考えてください

于 2012-06-25T21:59:28.583 に答える