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中，footertop的值总是等于$（'＃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属性都有你期望找到的值在边缘。

这是我的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'）的不同值：基于浏览器的auto

1 个答案: