JQuery изображение не сосредоточено в IE

Question

У меня есть эта страница, которая работает в 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; 
} 

Answer 1

В 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 код, просто взять идею

Answer 2

Страница не имеет доктайп и, следовательно, не будет проверять и работает в режиме совместимости. jQuery не поддерживает режим quirks, и IE часто показывает проблемы css. Пока вы не проверите страницу, вы должны запустить ее через W3C Validator, нет смысла пытаться устранить проблему css или скрипт

Вы должны иметь возможность просто добавить html5 docctype для исправления краткосрочной проверки. затем снова проверьте сломанные метки в W3C. Например, html5 doctype, посмотрите на источник этой страницы