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个浏览器的功能和一致性。

Answer 2

您可以尝试position: relative和top / right / bottom / left。

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

2 个答案: