Internet Explorer居中DIV問題

Question

我得到了一些將div居中的代碼。 該代碼在chrome上效果很好，但是由於某些原因，在IE（我認為是9或10）上，它是第一次工作，然后卻沒有。

為了說明這個問題，這里有一些照片：（忽略您不明白的跡象，那就是我的語言）

鉻：

IE第一次單擊對象打開：

IE第二次或更多次，當我單擊對象打開時：

這是我用來使div居中的代碼：

    jQuery.fn.center = function ()
{
    this.css("position","fixed");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

使用center()函數的代碼：

$('#products,#search-result').on("click",'.product-item-info',function() {
    var pid = $(this).find('input').val();
    $.get('product_info.php',{pid:pid},function(data){
        $('#product-lb').html(data).append('<span class="x"><span>X</span></span>');
        $('.x').click(function() {
            $('#dimmer').click();
        });

        $('#dimmer').css({width:$('html').width(),height:$('html').height()});
        $('#product-lb').center();
        $('#product-lb').show(800);
        $('#dimmer').show();
        $(window).resize(function() {
            $('#product-lb').center();
        });
    });
});

說明： #products是div，其中包含所有藍色和綠色的彩色div，如您在圖片中看到的那樣.product-item-info是可在每個產品DIV中找到的矩形的類。 #dimmer是黑色背景#product-lb是必須居中並顯示在頁面上的div

我希望這是足夠的信息！ 如果您還需要更多，請隨時詢問。

提前致謝！

Answer 1

如果您已經在使用jQuery，為什么不對對話框使用jQueryUI ？

無論如何，如果您想以常規方式使用，為什么不使用真棒的position：absolute方法？

這也適用於div，並且與IE7 +兼容，其優點是僅用於CSS。