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();
        });
    });
});

解释：

  1. #products是包含蓝色和绿色的所有彩色 div 的 div，如图所示
  2. .product-item-info是可以在每个产品 DIV 中找到的矩形类。

  3. #dimmer是黑色背景

  4. #product-lb是必须居中并在页面上显示的 div

在测试了很多潜在的东西之后，我想出了一个线索。当我尝试像这样控制台高度属性时：

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

我第一次看到了 chrome、explorer 和第二次 explorer 之间的差异：

Chrome - 第一次打开 div 控制台日志：

在此处输入图像描述

Chrome - 关闭 div 控制台后：

在此处输入图像描述

Internet Explorer - 第一次打开 div：

在此处输入图像描述

现在是奇怪部分的第一步，似乎当 div 被关闭时，函数被触发，因此控制台看起来像这样：

在此处输入图像描述

现在，这是我发现的最令人不安的事情，在第二次尝试打开 div 进行查看时，请查看控制台：

在此处输入图像描述

在关闭这个 div 之后：

在此处输入图像描述

似乎每当我打开 div、关闭 div 时都会触发该事件，并且最多触发 4-5 次。

这是我的关闭功能：

    $('#dimmer').click(function() {

    $('#dimmer').fadeOut(800);
    $('#product-lb').hide(800);
});

$('.x').click(function() {
            $('#dimmer').click();
        });

我不知道为什么会这样！在 chrome 中一切都很好，但是当涉及到 Internet Explorer 时，一切都变得混乱了。

提前致谢！

4

0 回答 0