0

我得到了一些将 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

我希望这是足够的信息!如果您需要更多,请随时询问。

提前致谢!

4

1 回答 1

-2

如果您已经在使用 jQuery,为什么不在对话框中使用jQueryUI

无论如何,如果你想走正常的路,为什么不使用很棒的位置:绝对方法?

这也适用于 div 并且与 IE7+ 兼容,而且这是一个纯 CSS 的东西。

于 2013-09-27T08:20:53.557 回答