jQuery.css()：Firefox 不返回“自动”值答案

【问题标题】：jQuery.css(): Firefox don't return 'auto' valuesjQuery.css()：Firefox 不返回“自动”值
【发布时间】：2012-11-07 12:00:56
【问题描述】：

我正在为几个元素设置顶部或底部以及左侧或右侧的值。当我尝试使用 Firefox (16.0.2) 访问这些值时，我得到了错误的 top 值（一个特定值而不是 auto）

CSS

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

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

您可以在这里尝试：http://jsfiddle.net/UEyxD/2/（在 Chrome/Safari 中运行良好）

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

【问题讨论】：

你想得到什么？
在Firefox中获取原始值的唯一方法是在元素上使用内联CSS，否则将返回计算值。
@Slevin，看看我的回答

标签： jquery css firefox

【解决方案1】：

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

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

你可以测试一下here。

【讨论】：

也许他需要定位div！

【解决方案2】：

这取决于浏览器以及它如何解释样式，这在某种程度上是您无法控制的。但是，通过特定的 CSS 和 jQuery 变通方法，您应该能够绕过它。例如，如果您不需要绝对定位该项目，则可以将其删除，或将其更改为 position:static;

看看这个question。

为什么 Chrome 和 IE 会返回不同的值：.css() 提供了一个浏览器计算样式功能的统一网关，但它没有统一浏览器实际计算样式的方式。它是浏览器以不同方式决定这种边缘情况并不少见。

【讨论】：

这个问题可以解决，如果你在隐藏元素的时候读取css属性。这样浏览器将不会返回计算值。看我的回答。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

我也有这个烦人的问题。

如果元素此时可见，某些浏览器会返回计算出的位置。诀窍是隐藏它，读取 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 的情况下使用此函数。

【讨论】：

虽然我不喜欢这样使用try/finally，但实际的背景信息帮助我解决了问题
谢谢，我不知道这个。就像我的车在可见时没有门，而当它变得不可见时，门就会出现。