Question

我将顶部或底部和左侧或右侧的值设置为几个元素。当我尝试使用Firefox（16.0.2）访问此值时，我得到top的错误值（特定值而不是auto）

CSS

div {
    bottom:200px;
    left:0px;
    top:auto;
    right:auto;
}

JS

$(function(){
    var top = $('div').css('top');
    alert(top);
});

您可以在此处试用：http://jsfiddle.net/UEyxD/2/（适用于Chrome / Safari）

任何想法如何防止这种情况？我想得到

Answer 1

我也有这个烦人的问题。

如果元素此刻可见，则某些浏览器会返回计算位置。诀窍是隐藏它，读取css然后再次使其可见（如果尚未隐藏）。

我编写了一个方便的函数来处理这个问题，并在Firefox中返回auto。

jsFiddle

var getCss = function($elem, prop) {
        var wasVisible = $elem.css('display') !== 'none';
        try {
            return $elem.hide().css(prop);
        } finally {
            if (wasVisible) $elem.show();
        }
    };


alert( getCss($('div'), 'top') );

finally只是为了在函数返回之前将可见性带回元素。

您应该仅在希望返回auto的情况下使用此功能。

Answer 2

使用以下代码设置'auto'时，您可以获得top的整数值：

$(function(){
    var top = $('div').offset().top;
    alert(top);
});

当您设置为自动时偏移返回位置值

Answer 3

这取决于浏览器以及它如何解释样式，它有点超出您的控制范围。但是，使用特定的CSS和jQuery解决方法，您应该能够绕过它。例如，如果您不需要绝对定位该项目，则可以将其删除，或将其更改为position:static;

看看这个question。

至于为什么Chrome和IE会返回不同的值：.css（）提供了一个统一网关到浏览器的计算样式函数，但它没有统一浏览器实际计算样式的方式。它的浏览器以不同的方式决定这种边缘情况并不罕见。

Answer 4

只需移除position样式，即可获得auto而不是计算值。

div {
    top: auto;
    bottom:20px;    
    right:20px;
    left:0px;
}

你可以测试它here。

jQuery.css（）：Firefox不返回'auto'值

4 个答案: