jquery - 调整大小不适用于 Firefox

Question

我正在使用 jQuery 使我所有的 div 具有相同的高度。 (这似乎是我的代码的唯一解决方案)。我还使用一些 css 来反转移动设备的 div 的顺序，以便标题始终显示在图像下方。在 chrome、safari 和 opera 中，一切都很完美(调整大小并正确排列)。然而，在 Firefox 中，图片似乎没有调整大小，一切都乱七八糟。奇怪的是，如果你在任何刹车(在 firefox 中)刷新浏览器，它会弹出到位，但同样，它不会随窗口调整大小。

我感觉它可能是高度脚本或重新排序的 CSS。但我不知道是什么原因造成的。

请看下面我的代码。非常感谢任何帮助。

// ****************************************************
// MATCH COLUMN HEIGHT
// ****************************************************

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.eqHeight');
});


$(window).resize(function(){
  equalheight('.eqHeight');
});

CSS 重新排序 div

.portThumb {
overflow: hidden;
display:table;
@include margin ($half-spacing - 7, -bottom);

    @include breakpoint(sm) { /* SM */
    @include margin ($half-spacing + 5, -bottom);
    }

    @include breakpoint(md) { /* MD */
    @include margin (-1px, -bottom);
    }

    img {
    width: 100%;
    max-width: 100%;
    height: auto;
    } /* /img */

    .fadeActive {
    @include opacity(1, 100, 1);
    }

    .fadeInactive {
    @include opacity(1, 30, .3);
    }
} 

.bottom {
display:table-footer-group; 
}

.top.xsSplit100 {
display:table-header-group;
float:none;

    @include breakpoint(md) {
    float:left;
    }
}

Answer 1

我认为如果使用纯 CSS 保持调整大小的 block 元素的纵横比，性能会更好。查看this answer .