jquery - jQuery.css()：Firefox 不返回“自动”值

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

当您使用以下代码设置“自动”时，您可以获得顶部的整数值：

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

• 设置为自动时的偏移返回位置值

Answer 3

This is down to the browser and how it interprets the styles, it is somewhat out of your control. However, with particular CSS and jQuery workarounds you should be able to get around it. For instance, if you do not need to the item to be positioned absolutely then you could remove this, or change it to position:static;

Have a look at this question.

As to why Chrome and IE return different values: .css() provides a unified gateway to the browsers' computed style functions, but it doesn't unify the way the browsers actually compute the style. It's not uncommon for browsers to decide such edge cases differently.

Answer 4

只需删除position样式，您将得到auto而不是计算值。

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

你可以在这里测试它。