Question

我有一个与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的margin-right。有什么建议？ http://jsbin.com/difobu/1/edit

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

Answer 1

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

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

所以你有点搞砸了。您可以通过几种方法使其保持一致。

通过在计算样式之前隐藏元素，可以可靠地返回auto。这样的事情可能有用：

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

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

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

您也可以尝试使用CSS解决问题，但我们需要查看整个页面来决定这一点。

Firefox计算的保证金自动返回0

1 个答案: