jQuery.css（'top-margin'）具有margin：auto的不同值（基於瀏覽器）

Question

讓我嘗試說明一下，我的問題是為什么不是所有的瀏覽器都以相同的方式對待這一點。

HTML

<body>
    <div id="container"></div>
    <div id="footer"></div>
</body>

CSS

body{
    height:100%;
    width:100%;
    position:relative;
}
.container{
    height:800px;
    width:800px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
}
.footer{
    position:absolute;
    left:0;
    right:0;
    margin:0 auto;
}

jQuery的

var footertop = (parseFloat($('#container').css('margin-top'))+parseFloat($('#container').css('height')))+'px';
$('#footer').css('top',footertop);

我有一個容器div，它在水平和垂直方向絕對居中。 然后，我嘗試將頁腳的“頂部”設置為容器的高度加上容器的頂部邊緣。 （這樣它就可以在容器正下方結束）。 此方法適用於某些瀏覽器（Chrome，Opera，Safari，IE9 +），但不適用於其他瀏覽器（Firefox，IE8-）。

我假設IE8和更早的版本不支持此方法，這很好，但是在Firefox中，頁腳的值始終等於$（'＃container'）。css（'height'）

如果我執行console.log（parseFloat（$（'＃container'）。css（'margin-top'））），則我將得到一個正整數，具體取決於瀏覽器的高度，但是在Firefox上，它始終為0。

請指教。

Answer 1

在firefox中，margin-top，margin-bottom，margin-left和margin-right的計算值最終都為0，並且top，bottom，left和right屬性具有您期望在margins中找到的值。

這是我的jQuery，現在可在所有瀏覽器上使用：

if(parseFloat($('#container').css('margin-top')) == 0){
    var footertop = (parseFloat($('#container').css('top'))+parseFloat($('#container').css('height')))+'px'; //firefox fix
}else{
    var footertop = (parseFloat($('#container').css('margin-top'))+parseFloat($('#container').css('height')))+'px';
}
$('#footer').css('top',footertop);

jQuery.css（'top-margin'）具有margin：auto的不同值（基於瀏覽器）

問題描述

1 個解決方案

解決方案1
1 2014-01-20 19:22:46

jQuery.css（&#39;top-margin&#39;）具有margin：auto的不同值（基於瀏覽器）

問題描述

1 個解決方案

解決方案1 1 2014-01-20 19:22:46

jQuery.css（'top-margin'）具有margin：auto的不同值（基於瀏覽器）

解決方案1
1 2014-01-20 19:22:46