IE7模式对话框-定位错误

更新
我发现了真正的问题
在我的代码中，我引用了覆盖层的高度，在除IE7之外的所有浏览器中，这与窗口大小相同，但在IE7中，这是文档大小。

所以我把它改成参考窗口大小，它就起作用了：(。

所以我现在的问题是，为什么IE7会这样做，我认为IE7是界外球，这是正确的吗？

---

原件
我正在创建一个模态对话框脚本(供我自己使用(。

该代码在.中运行良好

谷歌铬，Firefox，IE8+

然而，在IE7中，定位完全错误。示例

这些是我在IE9和IE7中得到的定位值(请记住，这些值比正常窗口小，因为我打开了开发工具。(

IE7
左：367px
顶部：1409px；

IE9左：369.5像素
顶部：122.5px；

我需要做些什么来解决这个问题？

CSS
请注意，这个css有一些奇怪的规则，例如body标记，仅用于测试目的
请注意，我知道rgba、box shadow等在css3不支持的浏览器中不起作用，
当对话框正常工作时，我会解决这个问题

body {
  padding: 0;
  margin: 0;
  color: #fff;
  height: 3000px;
}
#modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: none;
}
#modal-dialog {
  display: none;
  background: #000;
  border-bottom: 1px solid #141414;
  border-right: 1px solid #141414;
  border-top: 1px solid #121212;
  border-left: 1px solid #121212;
  position: absolute;
  z-index: 99999;
  -webkit-box-shadow: 3px 3px 10px #000000;
  -moz-box-shadow: 3px 3px 10px #000000;
  box-shadow: 3px 3px 10px #000000;
}
#modal-element{
  margin-top: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}
#test, #test2 {
  display: none;
  width: 800px;
  padding: 5px;
}
#test2 {
  width: 600px;
}
#modal-close {
  position: absolute;
  background-image: url('close.png');
  width: 16px;
  height: 16px;
  top: -5px;
  right: -5px;
  cursor: pointer;
}
#modal-title {
  position: absolute;
  top: -10px;
  left: 5px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
#modal-close:hover {
  -webkit-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
  box-shadow:  inset -1px -1px 10px rgba(0,0,0,0.8);
}
#modal-close:active {
  -webkit-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
  box-shadow:  inset -5px -5px 10px rgba(0,0,0,0.8);
}

Javascript

(function($) {
    $.widget("hailwood.modal", {
        options: {
            width: null,
            height: null,
            title: '',
            closeOnEscape: true,
            modal: true
        },
        self: {},
        _create: function() {
            //setup our elements
            var self = this;
            this.body = $('body');
            this.content = self.element;
            this.place = $('<div id="modal-place" style="display:none;"></div>');
            this.dialog = $('<div id="modal-dialog"><div id="modal-element"></div></div>');
            this.stuff = $('#modal-element', this.dialog);
            this.overlay = $('<div id="modal-overlay"></div>');
            this.title = $('<div id="modal-title">' + this.options.title + '</div>');
            this.closeButton = $('<div id="modal-close"></div>');

            //shove the placeholder element in
            this.content.after(this.place);
            //capture width and height
            this.orig_width = (this.options.width === null ? this.content.outerWidth(true) : this.options.width);
            this.orig_height = (this.options.height === null ? this.content.outerHeight(true) : this.options.height);
            //insert elements into the dom
            this.body.prepend(
                    this.overlay.prepend(
                            this.dialog.prepend(
                                    this.stuff.prepend(this.content)
                                    )
                                    .prepend(this.closeButton)
                                    .prepend(this.title)));
            //make the content visible
            this.content.show();
            this.refresh(this);
            //show the overlay and dialog
            this.overlay.fadeIn('medium', function(){
                self.dialog.show('slide', {direction: 'down'}, 'medium');
            });
            //setup the resize handler
            $(window).resize(function() {
                self.refresh();
            });
            this.closeButton.click(function() {
                self.close();
            });
            if (this.options.closeOnEscape)
                $(document).bind('keyup.hailwood.modal', function(e){
                    if (e.keyCode == 27)
                        self.close();
                });
            //setup close handler
            this.self = this;
        },
        close: function() {
            this.destroy();
        },
        refresh: function() {
            var self = this;
            if (self.overlay.length == 0 || self.dialog.length == 0)
                return false;
            self.height = self.orig_height;
            self.width = self.orig_width;
            //make an adjustment to the height if it is bigger than the overlay
            var s1 = self.height;
            self.height = (self.height > self.overlay.height() ? self.overlay.height() - 20 : self.height);
            var diff = (s1 === self.height ? 0 : 16);
            //set the dialog height and width
            self.dialog.height(self.height);
            self.dialog.width(self.width);
            self.stuff.height(self.height -diff);
            self.stuff.width(self.width);
            //position the dialog
            self.left = (self.overlay.width() / 2) - (self.dialog.outerWidth() / 2);
            self.top = (self.overlay.height() / 2) - (self.dialog.outerHeight() / 2);
            self.dialog.css({left : self.left, top  : self.top});
        },

        destroy: function() {
            var self = this;
            self.dialog.hide('slide', {direction: 'down'} ,'medium', function() {
                self.place.after(self.content.hide());
                self.place.remove();
                self.dialog.remove();
                $(window).unbind('.hailwood.modal');
                $(document).unbind('hailwood.modal');
                self.overlay.fadeOut('medium', function() {
                    self.overlay.remove();
                });
            });
            $.Widget.prototype.destroy.call(this);
        }
    });
    /*
     * Remember what I said in the first comment?
     * we pass in jQuery here so it gets aliased as $
     */
})(jQuery);

   body {
        height: 3000px;
    }