如何解决IE7模式对话框-定位错误？
| 更新资料 我发现了实际的问题。 在我的代码中，我指的是覆盖层的高度， 在除IE7之外的所有浏览器中，此值均与窗口大小相同，但是在IE7中，此值为文档大小。 所以我将其更改为引用窗口大小，并且它可以工作:)。 所以我现在的问题是，为什么IE7会这样做，我是否正确假设IE7是这里的犯规球？ 原版的 我正在创建一个模式对话框脚本（供我自己使用）。 该代码可以完美地工作。 谷歌浏览器， Firefox， IE8 + 但是在IE7中，定位完全错误。 例 这些是我在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.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.8);
-moz-box-shadow: inset -1px -1px 10px rgba(0,0.8);
box-shadow: inset -1px -1px 10px rgba(0,0.8);
}
#modal-close:active {
-webkit-box-shadow: inset -5px -5px 10px rgba(0,0.8);
-moz-box-shadow: inset -5px -5px 10px rgba(0,0.8);
box-shadow: inset -5px -5px 10px rgba(0,0.8);
}
(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\',\'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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。