使用jQuery获取firefox中的自动计算边距 [英] get the auto computed margin in firefox with jQuery

问题描述

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

With the markup and css below, I tried to get the computed left-margin of 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中工作。尝试其他方法：

it works in Chrome, Safari, IE9 but surprisingly doesn't work in Firefox. Tried the other approach:

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

所以我想firefox不支持获取未定义的CSS与jQuery？一个直接的方式来解决它：

Also works well but Firefox. So I guess firefox doesn't support to obtain the undefined css with jQuery? A straight forward way to work around with it is:

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

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

But I wonder if there is a better way.

推荐答案

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

When you say it doesn't work, do you receive errors (in the console) or does it return 0? Returning 0 for the auto setting is, apparently, an issue with different browsers.

您可以使用轻量级 jSizes 库，它返回所有指标（以像素为单位）。这将节省你不得不使用outerWidth等。

You could use the lightweight jSizes library which returns all metrics in pixels. This will save you having to faff around with outerWidth, etc..

这篇关于使用jQuery获取firefox中的自动计算边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！