Javascript JQuery没有获得正确的宽度

我使用此脚本获取宽度，然后将其应用于同一元素：

$(document).ready(function(){                
    $(".equal-height").each(function(){
        var slideSize = $(this).outerWidth();

        console.log(slideSize);

        $(this).css({ "height" : slideSize + "px" });
    });                
});

然而，由于某些原因，有些元素有时无法获得匹配的宽度和高度。正如你在这把小提琴中所看到的：最后一个元素的尺寸是正确的，但其余的元素都高于它们的宽度。我试图让它们都是方形的，我也需要支持旧的浏览器

---

只有当窗口的大小变小并且四个项目堆叠在一个2列中时，这似乎才是一个问题。

嗯，我认为jQuery在计算每个元素的宽度时存在一个错误

作为一种解决方法

// Height = Width
$(document).ready(function() {
  var width = $('.wide-content').width();
  // prevent jQuery from calculating the width of children
  $('.wide-content').hide();
  // $(".equal-height").width() is now 50
  var slideSize = $(".equal-height").width() * width / 100;

  $(".equal-height").each(function() {
    $(this).css({
      "height": slideSize + "px"
    });
  });
  $('.wide-content').show();
});

所有元素上的高度相同

我只需要使用第一个框来计算其他元素的高度-至少这将确保相同的高度。同时，它也将消除该循环

$(".equal-height").css({"height" : $(".equal-height").eq(0).outerWidth()});

一条线来统治他们所有人

但是，由于这不符合范围

用不同大小的元素制作正方形

经过一些混乱之后，很明显，只有在您开始篡改高度之后，宽度才返回错误。这可以通过注释掉设置高度的css命令并观察输出来轻松测试

解决方案似乎是设置一个预定义的高度：

.link-quarters {            
    width: 25%;
    height: 100px;
    float: left;
    ...

这将返回所有元素（重要部分）上完全相同的宽度，然后您可以通过编程设置相应的高度，而不会出现问题

不过，舍入仍然存在一个问题，因为百分比宽度可能会导致浏览器或js对十进制数字进行舍入

---

在你对其他答案发表评论之后

我在页面上有很多使用这个脚本的元素，并且不是所有的元素都是相同大小的，还有更小的正方形集

及

但最终的盒子并不是方形的。如果你检查你的小提琴，盒子太高了约10像素

这个解决方案似乎克服了这些问题，如果有帮助，请告诉我

---

这是一个很好的解决方案，但我在页面上有许多使用此脚本的元素，并且不是所有元素都是相同大小的，也有较小的正方形集，因此使用了循环。这解决了我的高度不同的问题，但结果框不是方形的。如果你检查你的小提琴，盒子太高了约10像素。是的，我可以看到这个，但我不知道，它来自哪里。jQuery为我提供了与firebug不同的宽度。在我看来像个虫子。你能在没有JSFIDLE的情况下在你的代码中尝试这个吗？在我自己的代码中，它的大小仍然不正确。不幸的是，请注意评论。解决方案正在按预期工作。问题是什么？这有点奏效了，但是正方形现在看起来有点太大了，尽管相等的高度和宽度都很好。您可以看到，列的宽度没有下降到2，而是将每个项目按1进行堆叠，因为它们现在太宽了，无法堆叠。这是因为我们可以在JSFIDLE中调整视图窗口的大小，最初div的宽度将为您提到的25%，然后我们将高度和宽度设置为像素，我觉得在浏览器中查看时应该可以，此外，如果您觉得用户可能会调整窗口大小，您还可以触发窗口大小调整事件并重新调整div。这似乎大部分都有效，但在某些宽度下，一些div看起来比其他div大。例如，我有一行4，前两行是146宽度和高度，后两行是141.hmmm，这一定与设置宽度的媒体标签有关。有了一个合适的窗口宽度，所有div都相等的情况下，它似乎可以正常工作，我认为较小的窗口不属于您的媒体css样式，因此没有对齐错误。

$(document).ready(function () {
    $(".equal-height").each(function () {
        var slideSize = $(this).outerWidth();

        console.log(slideSize);

        $(this).css({ "height": slideSize + "px", "width": slideSize + "px" }); 
        //setting the width along with height
    });                
});