javascript - 负边距在非 Chrome 浏览器中无法正确呈现

Question

我正在开发一个网站并使用下面的代码。Chrome 似乎工作正常，但 Firefox 没有读取负边距并且 IE 完全没有正确加载它:

表格背景:

<div class="pageB" style="opacity:0.8;position: fixed; height: 100%; width: 100%; top: 0; left: 0; background-color: #000000; z-index: 200; display: none; font-weight: bold; color: White; font-size: 16pt;direction: rtl;">
<div class="userlogin">
<div id=top>
<div class=s1></div>
<div class=s2></div>
<div class=s3></div>
<div class=s4></div>
</div>
<div id=round>
<div align="right" dir="rtl" style="float: right;"><img src="/Files/close.png" width="24" style="cursor: pointer;" onclick="AnimateBoxBack()"></div>
</div>
<div id=bottom>
<div class=s4></div>
<div class=s3></div>
<div class=s2></div>
<div class=s1></div>
</div>
</div>
</div>

主窗体:

<div class="login-box">
Username :
<input type="text" style="width: 99%;" name="username" class="username" onfocus="AnimateBox()" /><br />
Password : <input style="width: 99%;" type="password" name="password" class="password" onfocus="AnimateBox()" /><br />
<input type="radio" name="chkAdm" class="chkAdm" id="admin" checked="checked">Admin&nbsp;&nbsp;
<input type="radio" name="chkAdm" class="chkAdm" id="user">User<br /><br />
<button class="rounded" onclick="Login()"><span>Login</span></button>
</div>

为其设置动画的 javascript 代码:

function AnimateBox()
{
    $(".PageB").css("display","block");
    $(".login-box").css("position", "fixed");
    $(".login-box").css("z-index", "300");// : "300"
    $(".login-box").animate({
        "top" : "50%",
        "left" : "50%",
        "margin-top" : "-140px",
        "margin-left" : "-175px"
    },1000);
    loginAnimated = true;
}

提前致谢

Answer 1

从技术上讲，它应该适用于您提到的所有 3 种浏览器(example)，我时常使用负边距(但您应该尽量避免使用它们)，所以必须您的页面出现其他问题。

但是，这不是我写这个答案的原因。人们使用负边距的原因是在页面完全呈现之前，即在将其放置在 CSS 样式表中时，在不知道宽高比或屏幕尺寸的情况下定位 div。另一方面，您可以通过以下方式准确了解屏幕尺寸:

$(window).width(); // Window width;
$(document).width(); // HTML width;

所以你可以使用:

$(".login-box").animate({
    "top" : (0.5 * $(window).height()) - 140,
    "left" : (0.5 * $(window).width()) - 175
}, 1000);

它允许您使用 position: fixed; 或 position: absolute; 没有负边距，而不会损失您提到的所有 3 种浏览器的功能和一致性。