中心div垂直，正常工作與WebKit的錯誤，但在Firefox中

我中心在Firefox的div一個問題，它似乎工作在所有WebKit瀏覽器很好，所以我真的不知道我做錯了什麼：中心div垂直，正常工作與WebKit的錯誤，但在Firefox中

我的CSS：

html { 
width: 100%; 
height: 100%; 
} 

body { 
position: absolute; 
top: 0px; 
bottom: 0px; 
left: 0px; 
right: 0px; 
height: 100%; 
width: 100%; 
} 

#Page { 
position: absolute; 
left: 0px; 
right: 0px; 
top: 0px; 
bottom: 0px; 
} 

#LoginBackground { 
position: absolute; 
margin-top: -45%; 
margin-left: -35%; 
left: 50%; 
top: 50%; 
width: 70%; 
height: 90%; 
}

我的HTML：

<body> 
<div id="Page"> 
<div id="LoginBackground"> 
</div> 
</div> 
</body>

這是壁虎工程中的錯誤無論或我是否做錯了什麼。

來源

2012-04-19 David Greiner

EDIT 新撥弄http://jsfiddle.net/FsjNu/2/

html { 
width: 100%; 
height: 100%; 
} 

body { 
position: absolute; 
top: 0px; 
bottom: 0px; 
left: 0px; 
right: 0px; 
height: 100%; 
width: 100%; 
} 

#Page { 
position: relative; 
width: 100%; 
    height:100%; 
} 

#LoginBackground { 
border: 1px solid red; 
height: 90%; 
left: 50%; 
margin-left: -35%; 
position: absolute; 
top: 5%; 
width: 70%;

}

<body> 
<div id="Page"> 
<div id="LoginBackground"> 
</div> 
</div> 
</body>

來源

2012-04-19 18:01:07 user1289347

我不認爲我提供了足夠的信息。你的回答是正確的，但不足以解決我的問題。感謝tho – 2012-04-19 18:16:31

實際上它不適用於當前的Firefox版本。 – 2012-04-20 18:53:10

更新了小提琴，現在在FF11中工作。 – user1289347 2012-04-20 21:52:09

水平對齊適合我，垂直似乎是問題，試試這個，也許吧。

#loginBackground 
{ 
top:0; 
margin-top: 5%; 
}

來源

2012-04-19 17:58:44 mamadrood

沒有幫助。看看我的例子在這裏[鏈接]（http://davidgreiner.dyndns.org/usocial/login.html） – 2012-04-19 18:07:22

那麼，它與頂端：0和邊際頂部5％，但頁腳越過紅色的div，所以你需要減去頁腳高度（10％）到你的紅色div高度。 – mamadrood 2012-04-19 18:11:18

是的，我現在得到了你。我想我會嘗試一種不同的方法。謝謝你 – 2012-04-19 18:15:13

使用 #page { 寬度：980px; margin：10px auto; } #LoginBackground {margin：50px auto;
width：500px; }

來源

2012-04-19 18:04:04 sohaan

我不想要一個固定的寬度，設計應該是液體。 – 2012-04-19 18:10:22

液體如何根據瀏覽器窗口重新調整大小或其寬度取決於它內部元素的寬度 – sohaan 2012-04-19 18:17:49

用瀏覽器窗口調整大小 – 2012-04-19 18:19:04

中心div垂直，正常工作與WebKit的錯誤，但在Firefox中

回答

相關問題