Question

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

所以我把它更改为引用窗口大小并且它有效：）。

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

<小时/> 的原始
我正在创建一个模态对话框脚本（供我自己使用）。

代码完美无缺。

Google Chrome，火狐， IE8 +

然而在IE7中定位完全错误。 Example

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

IE7
  左：367px;
  上：1409px;

IE9   左：369.5px;
  上：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);

Answer 1

尝试删除此行：

   body {
        height: 3000px;
    }

我测试时没有影响FF，反正我真的看不到它的使用。

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

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

1 个答案: