Javascript jQuery加载DIV width在Firefox中不起作用

我有一个网站，它使用JavaScript/jQuery脚本根据屏幕大小获取div的宽度

当我在Firefox中打开网站时，div不会出现，因为宽度被设置为0px。div在Chrome和IE中显示良好，因此我检查了Firefox中是否启用了JavaScript，并且确实如此

有什么解决办法吗

我使用的脚本是：

$(document).ready(function () {
  var w = $('#content').css("margin-left");
  $('#wrapper').css("width", w);
});

---

如果你在Firefox中打开它并检查侧栏包装器div，你会看到宽度被设置为0，在Chrome中它有一个值。

看起来一切都在JSFIDLE上运行

宽度：
保证金：
$（）.ready（函数（））{
var w=$（'#content'）.css（“左边距”）；
$（'#content'）.append（$（'#content'）.css（“左边距”）；
$（'#wrapper'）.css（“宽度”，w）；
$（'包装器'）.append（w）；
});
#内容{
左边距：100px；
}
#包装纸{
宽度：0px；
}

以下是我在另一个线程中发现的内容……我想Firefox不会让它发生的

不幸的是，这归结为浏览器的差异。引述：

至于为什么Chrome和IE返回不同的值：

.css（）

为浏览器的计算样式功能提供了一个统一的网关，但它没有统一浏览器实际计算样式的方式。浏览器以不同的方式决定这种边缘情况并不少见

所以你有点完蛋了。您有几个选项来保持一致性

通过在计算样式之前隐藏元素，可以可靠地返回

auto

。类似的方法可能会奏效：

您还可以使用jQuery的

$（'.bar'）.offset（）

，它返回您可能能够使用的属性

你也可以尝试用CSS来解决这个问题，尽管我们需要查看你的整个页面来决定这个问题

---

出现问题的原因是Firefox和Safari的奇怪行为，这显然违反了W3C规范getComputedStyle（），应该作为错误报告

您已将内容的

边距设置为：
0px auto
。这是在包含块中以给定宽度将块级元素居中的常用方法。浏览器取父元素的宽度，减去元素的宽度，然后除以二。结果值用于marginLeft和marginRight，并应作为这两个属性的computedValue返回。计算后，将渲染元素（正确居中）。但是Firefox和Safari在进行计算和渲染之前会看到关键字auto并将computedStyle设置为0px（auto的默认值）

不要相信你总是可以依赖其他浏览器返回的值。此时，父对象或祖辈本身有一些边距或填充，或者Boxsize属性在某个地方发生了更改，即使渲染是正确的，他们也会感到困惑并返回错误的值

如果您试图通过查找（速记）属性
margin
来检测此类情况，您将再次失败：Firefox、InternetExplorer和Safari Answare with silence（空字符串）。Chrome和Opera返回边距速记，但它们的值通常与使用marginLeft和marginRight得到的值不同

marginLeft
的解决方法使用元素的左偏移量与其父元素（或其偏移父元素，当元素具有“绝对”位置时）之间的差值。参考您的代码，它看起来像：

$(document).ready(function () {
    var con = $("#content"), cpos = con.css('position'), par, w;
    if (cpos === 'static' || cpos === 'relative') par = con.parent();
    else par = con.offsetParent();
    w = con.offset().left - par.offset().left;
    $("#wrapper").css('width', w);
});

我不能保证它在所有用例中都能工作，但直到现在我还没有发现问题。
工作现在，即使是Firefox和safari也有了侧边栏的宽度。
第二在这里，您可以在使用
marginLeft和offsetLeft用于快速浏览器测试

由于没有补偿权，marginRight的解决方案需要更多的计算。如果需要，请发表评论，我将扩展我的答案。
您能在jsbin.com或类似服务中创建此问题吗？这里没有足够的信息来回答这个问题。JSFIDLE中的代码副本最好是jsBin或JSFIDLE。到目前为止，我从您的代码中看到的情况是，您正在将
#content
元素的
边距left
的值分配给
#wrapper
的宽度。如果包装器是
0
，这意味着在FireFox中，
内容的
左边距也设置为
0
。如果
marginleft
是
0
，那么您的宽度也将是
0
。在我的CSS中，#content marginleft设置为auto，但是当我查看计算值时，它会说它的值是0，而它显然不是。感谢您的详细回答。我尝试了您提供的脚本，它使我的div消失，原因与上面相同，宽度为0。我对您使用的一些javascript不太熟悉，但是我会尝试从中找到解决方案。我用我的代码做了一个测试，FireFox（32）和Safari现在都会显示您的侧边栏。请试一试。@Casey我已经用两个jsfiddle更新了我的答案。请尝试发布浏览器的行为。DOH！好的，它确实起作用了。当我复制你的脚本来测试它时，我忘了在前后添加脚本标记。我用标签试过了，看起来很棒！谢谢你，马丁！
var $bar = $('.bar');
$bar.hide();
var barMarginRight = $('.bar').margin().right; // "auto"
// do whatever you need to do with this value
$bar.show();

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

$(document).ready(function () {
    var con = $("#content"), cpos = con.css('position'), par, w;
    if (cpos === 'static' || cpos === 'relative') par = con.parent();
    else par = con.offsetParent();
    w = con.offset().left - par.offset().left;
    $("#wrapper").css('width', w);
});