Question

我有一个网站，它使用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中打开此JSfiddle并检查侧边栏包装div，您会看到宽度设置为0，在Chrome中它有一个值。

Answer 1

似乎一切都在jsFiddle上工作。

http://jsfiddle.net/wnxLr9bo/

<div id="wrapper">width of: </div>
<div id="content">the margin of: </div>

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

#content {
    margin-left: 100px;
}

#wrapper {
    width: 0px;
}

Answer 2

所以这就是我在另一个帖子上发现的......我猜Firefox不会让它发生。

不幸的是，这归结为浏览器差异。引用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解决问题，但我们需要查看整个页面来决定。

Answer 3

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

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

不要相信你总是可以依赖其他浏览器返回的值。在那一刻，父或祖父母本身有一些边距或填充，或者boxSizing属性在某处被更改，即使渲染正确，它们也会混淆并返回错误的值。

如果你试图通过寻找（简写）属性margin来检测这种情况，你将再次失败：Firefox，InternetExplorer和Safari回答沉默（空字符串）。 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);
});

我无法保证它适用于所有用例，但直到现在我才发现问题。工作JSFiddle here。现在甚至Firefox和safari都获得了侧边栏的宽度。第二个JSFiddle。在这里你可以在使用之间切换 marginLeft和offsetLeft用于快速浏览器测试。

由于没有偏移权，marginRight的解决方法需要更多的计算。如果你需要它，发表评论，我会扩展我的答案。

加载DIV宽度的jQuery在Firefox中不起作用

3 个答案: