Firefox 计算的边距自动返回 0

Posted 2023-03-06

【中文标题】Firefox 计算的边距自动返回 0

【英文标题】：Firefox computed margin auto returns 0

【发布时间】：2014-08-09 02:46:44

【问题描述】：

我有一个与 css 水平居中的 div：

.bar 
    height: 38px;
    width: 970px;
    margin-left: auto;
    margin-right: auto;

我需要另一个元素与 .bar 具有相同的右侧边距，因此我为此使用 jQuery sizes：

<div class="spec">I need to be aligned the same.</div>

JS：

$(".spec").css('margin-right', $('.bar').margin().right + 'px');

这有效，但在 Firefox 30.0 中无效，因为它返回 0 来计算 .bar 的边距。有什么建议 ？ http://jsbin.com/difobu/1/edit.

$('.bar').css('margin-right') 在 FF 30.0 中也返回 0px。 如果您不投票，请提供解释。

【问题讨论】：

你试过$('.bar').css('margin-right')吗？

说真的，$('.bar').margin().right 可以在其他浏览器中使用？应该是$('.bar').css('margin-right')

$('.bar').css('margin-right') 在 FF 中返回 0，但在 Chrome 中返回一个数字。

请显示相关的 html 标记。 .bar 是否嵌套在另一个元素中？其他浏览器返回什么值？

不要粗鲁，但是那个插件有什么意义呢？似乎它与.css() 具有相同的功能，但增加了函数调用的额外开销。我错过了什么吗？

【参考方案1】：

不幸的是，这归结为浏览器的差异。引用an answer to a similar problem:

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

所以你有点搞砸了。您有几个选项可以使这一点保持一致。

您可以通过在计算样式之前隐藏元素来可靠地返回auto。这样的事情可能会奏效：

var $bar = $('.bar');
$bar.hide();
var barMarginRight = $('.bar').margin().right; // "auto"
// do whatever you need to do with this value
$bar.show();

您还可以使用 jQuery 的 $('.bar').offset()，它返回您可能可以使用的属性。

// This might not be exactly what you want, but...
$('.spec').css('margin-left', $('.bar').offset().left + 'px');

您也可以尝试使用 CSS 解决问题，但我们需要查看您的整个页面才能做出决定。