IE7 模态对话框 - 定位错误？

Question

更新
我发现了实际问题。
在我的代码中，我引用了叠加层的高度，在除 IE7 之外的所有浏览器中，这与 window 大小相同，但在 IE7 中，这是文档大小。

所以我将其更改为引用 window 大小并且它可以工作:)。

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

---

原来的
我正在创建一个模态对话框脚本（供我自己使用）。

该代码完美地工作。

谷歌浏览器，Firefox，IE8+

然而在 IE7 中的定位全错了。 例子

这些是我在 IE9 和 IE7 中得到的定位值（请记住，这些值小于正常的 window，因为我打开了开发工具。）

IE7
左：367px；
顶部：1409 像素；

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

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

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

Answer 1

尝试删除此行：

   body {
        height: 3000px;
    }

我测试的时候对FF没有影响，反正我真的看不出它有什么用。

当你试图让 CSS 东西工作时，最好删除不必要的代码，这样你就可以确定问题的根源，除非你认为 box-shadow 可能与你的定位问题有关。