0

我有这个页面可以在 Chrome 和 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;
}
4

2 回答 2

1

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

您应该能够简单地添加一个 html5 文档类型来修复短期验证。然后在 W3C 中再次检查损坏的标签。例如 html5 doctype，请查看此页面的源代码

于 2012-06-25T21:59:36.507 回答
0

在 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");

粗略的代码，随心所欲

于 2012-06-25T21:59:28.583 回答