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

jQuery to load DIV width not working in Firefox

本文关键字：Firefox 不起作用 加载 DIV jQuery      更新时间：2023-09-26

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

当我在Firefox中打开网站时，div不会出现，因为宽度设置为0px。div在Chrome和IE中看起来很好，所以我检查了一下，以确保JavaScript在Firefox中启用了

有解决方案的想法吗？

我使用的脚本是：

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

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

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

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

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

如果您试图通过查找（简写）属性margin来检测此类情况，您将再次失败：Firefox、InternetExplorer和Safari answere为静默（空字符串）。Chrome和Opera返回marginshort，但那里的值通常与marginLeft和marginRight不同。

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

$(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。现在，即使是Firefox和safari也有了侧边栏的宽度。第二个JSFiddle。在这里，您可以在使用之间切换marginLeft和offsetLeft用于快速浏览器测试。

由于没有抵销权，marginRight的变通方法需要更多的计算。如果你需要，发表评论，我会延长我的回答。

似乎一切都在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;
}

下面是我在另一个线程上发现的。。。我想Firefox不会让它发生的。

不幸的是，这归结为浏览器的差异。引用一个类似问题的答案：

至于为什么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来解决这个问题，尽管我们需要查看你的整个页面才能做出决定。

相关文章：