JQuery圖像不在IE中居中

我有這個頁面，它適用於Chrome瀏覽器，但是在IE瀏覽器中並不完全適用。該頁面包含圖片，點擊該圖片後，會在頁面中心顯示較大的圖片，並且背景會變灰。JQuery圖像不在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; 
}

來源

2012-06-25 N P

可能與問題無關，但你應該保持你的HTML標籤相同的情況 - 你有大寫''和小寫''。最好的做法，使他們都是小寫。 – Spudley

在IE它看起來像圖像的高度和寬度直到形象被完全加載，

因此等等，直到圖像加載之前居中它。

或者在圖像的加載事件中強制一箇中心（）。

一個簡單suggession，

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代碼，只是把這個想法

來源

2012-06-25 21:59:28 sabithpocker

哦！首先添加DOC類型作爲@charlietfl建議 – sabithpocker

頁沒有DOCTYPE，因此不會驗證和怪癖模式下運行。 jQuery不支持怪癖模式，而IE經常會顯示css問題。在您驗證頁面之前，應該通過W3C Validator運行它，嘗試對CSS或腳本進行故障排除沒有多大意義

您應該可以簡單地添加html5 docctype來修復短期驗證。然後在W3C中再次檢查破碎的標籤。例如html5文檔類型，看看這個頁面的源代碼

來源

2012-06-25 21:59:36 charlietfl

JQuery圖像不在IE中居中

回答

相關問題