javascript - jQuery .height() 和 .outerHeight() 返回零

Question

我正在尝试编写一个小的 jQuery 插件，它将根据 div 的高度垂直居中，

基本上在我的 css 中我有 top: 50%，但由于高度是可变的我需要计算它。

这个的 HTML 看起来像

<div class="button-wrapper js-center" data-center="vertical" style="margin-top: 0px;"
    <span class="sub-text">Multiline text with two lines</span>
    <a href="" class="shop-btn">Shop_</a>
</div>

在我的插件中，我尝试记录高度，但它一直返回零:

console.log($el);
console.log("$el.outerHeight(): " + $el.outerHeight());
console.log("$el[0].scrollHeight: " + $el[0].scrollHeight);

// output:
$el.outerHeight(): 0
$el[0].scrollHeight: 0 

当我使用开发工具检查时，它看起来像这样:

所以我想知道可能会出现什么问题，作为引用，这是我(尝试)编写的插件:http://pastebin.com/Qz7BgkcG

编辑:这是在 .button-wrapper

上使用的主要 CSS

.button-wrapper {
    width: 250px;
    left: 50%;
    top: 50%;
    margin-left: -125px;
    position: absolute;
    z-index: 100; 
}

编辑 2:使用所有 css 重新创建，但我在这里没有遇到同样的问题:http://jsfiddle.net/8Etex/

Answer 1

我想知道问题是否是因为 jQuery 的 .height() 方法返回元素的计算高度 而不是实际的框模型(引用:API documentation)。

如果我查看您在上面的 jsFiddle 中创建的元素，您会发现 Firefox 无法识别您的绝对定位元素的计算高度。这意味着它只会返回零。例如，如果我在 CSS 中强制元素的高度属性，计算的尺寸将被更新并且我可以检索一个值。