Question

我有这个页面适用于Chrome＆amp; Firefox但不完全在IE中。该页面包含的图片在单击时会以页面为中心显示较大的图像，背景会显示为灰色。

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

最初，我认为只有IE 8有问题，但我测试了IE9，问题也存在。如果重新打开图像，则图像可能居中。 IE中的另一个问题是背景并未完全变灰。浏览器的右侧垂直部分有一些空白区域。如果您调整浏览器的大小以使其水平延长，则不会动态调整灰色部分的大小。

这是缩写的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;
}

Answer 1

页面没有doctype，因此不会验证并且正在以怪癖模式运行。 jQuery不支持quirks模式，IE会经常显示css问题。在您验证页面之前，应该通过W3C Validator运行它，尝试对css或脚本进行故障排除没有多大意义

您应该只需添加html5 docctype即可修复短期验证。然后在W3C中再次检查损坏的标签。例如html5 doctype，请查看此页面的来源

Answer 2

在IE中，它看起来像图像的高度和宽度，直到图像完全加载，

等等，直到图像加载为止。

或者在图像的加载事件中强制使用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");

Rogh代码，只需要理念

JQuery图像不以IE为中心

2 个答案: