Internet Explorer居中DIV问题

问题描述

我得到了一些将div居中于网页中间的代码.该代码在chrome上效果很好，但是由于某种原因，它在IE(我认为是9或10)上是第一次工作，然后又没有.

I got some code which centers a div in a middle of the webpage. The code works great on chrome, but for some reason, on IE(I think it's 9 or 10) it works for the first time, and then it doesn't.

为演示这个问题，这里有一些照片:(忽略您不明白的标志，那是我的语言)

To demonstrate the issue, here are some photos: (Ignore the signs you don't understand, thats my language)

Chrome浏览器:

Chrome:

IE第一次单击对象以打开它时

IE first time I click on an object to open up:

IE第二次或多次，当我单击一个对象打开时:

IE second time or more, when I click on an object to open up:

这是我用来使div居中的代码:

This is the code I'm using to center the 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

explanations:#products is the div that contains all of the colorized divs in blue and green as you can see in the picture.product-item-info is the class of the rectangle that can be found in each product DIV.#dimmer is the black background#product-lb is the div that has to be centered and shown on the page

我希望这是足够的信息！如果您还需要更多，请随时询问.

I hope this is enough information! If you need more than this, please feel free to ask.

提前谢谢！

推荐答案

如果您已经在使用jQuery，为什么不使用 jQueryUI 对话?

if you're already using jQuery, why not use jQueryUI for the dialog?

无论如何，如果您想采用常规方式为什么不使用很棒的位置:绝对方法?

anyway if you want to go the normal way why not use the awesome position:absolute method?

这也适用于div，并且与IE7 +兼容，其优点是仅用于CSS.

this also applies to a div and is compatible with IE7+, with the plus of this being a CSS-only thing.

这篇关于Internet Explorer居中DIV问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！