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

我正在开发一个网站并使用以下代码.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;
}

提前致谢

最佳答案

从技术上讲，它应该在您提到的所有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种浏览器的功能和一致性。