使用 jQuery 在 Firefox 中获取自动计算的边距答案

【问题标题】：get the auto computed margin in firefox with jQuery使用 jQuery 在 Firefox 中获取自动计算的边距
【发布时间】：2013-06-04 07:30:07
【问题描述】：

使用下面的标记和 css，我尝试获取 shell 的计算左边距。

 <section class="page-title">
      <div class="shell">
        <h5 class="title">Welcome!</h5>
      </div>
    </section>

.shell {
  zoom: 1;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

使用

parseInt($('.shell').css('marginLeft'))

它可以在 Chrome、Safari、IE9 中运行，但在 Firefox 中却无法运行。尝试了另一种方法：

($('.shell').outerWidth(true) - $('.shell').outerWidth()) / 2

也很好用，但 Firefox。所以我猜firefox不支持用jQuery获取未定义的css？一个直接的解决方法是：

($('.page-title').width() - $('.shell').outerWidth()) / 2

但我想知道是否有更好的方法。

【问题讨论】：

我在 Firefox v21 上遇到了完全相同的问题
我在 Firefox v37.0.1 中遇到了同样的问题。

标签： jquery firefox cross-browser

【解决方案1】：

当您说它不起作用时，您是收到错误（在控制台中）还是返回 0？显然，为自动设置返回 0 是不同浏览器的问题。

您可以使用轻量级的jSizes 库，它以像素为单位返回所有指标。这将使您不必费心使用outerWidth等。

【讨论】：

这个库在margin: auto 时返回 0。在这种情况下有没有办法获得保证金？
jQuery（可能还有 vanilla JS）也为“自动”返回 0px。我认为您无法可靠且一致地跨浏览器获得auto 的值。 auto 的意思是“让浏览器决定”，您正在阅读的是这个基于浏览器的值。
（margin-left 等返回什么？）