負邊距在非Chrome瀏覽器中無法正確顯示

我正在開發一個網站並使用下面的代碼.Chrome似乎工作正常，但Firefox不讀取負邊距，IE完全無法正確加載：負邊距在非Chrome瀏覽器中無法正確顯示

背景形式：

<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; 
}

在此先感謝

來源

2011-07-16 Amir

在http://jsfiddle.net/ – Sotiris

上創建一個演示你正在測試的IE版本（IE6不支持'position：fixed'; IE6,7,8不支持'opacity' ） – Spudley

從技術上講它應該在所有的瀏覽器3的工作你提到（example），我用切緣陰性飄飛（但你應該儘量避免他們），所以必須有別的事情與去錯了你頁。

然而，這不是我在寫這個答案的原因。人們之所以使用負邊緣被以定位div不知道長寬比或屏幕大小之前的頁面被完全呈現，即在CSS樣式表放置時。你在另一方面，可以確切地知道屏幕尺寸是多少，通過：

$(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種瀏覽器中都失去了功能和一致性。

來源

2011-07-16 13:36:38 KilZone

你說得對。謝謝 – Amir

你可以嘗試position: relative和top/right/bottom/left。

來源

2011-07-16 12:53:39 casraf

但反正沒有使用固定位置？這對我來說太重要了 – Amir

嗯..然後我不知道，理論上它應該工作..對不起 – casraf

不管怎樣謝謝回答 – Amir

負邊距在非Chrome瀏覽器中無法正確顯示

回答

相關問題