jQuery.css():Firefox不返回'auto'值

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然后再次使其可见(如果尚未隐藏).

我写了一个方便的函数来处理这个并将auto在Firefox中返回.

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

看看这个问题。

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