调整大小不适用于 Firefox

Question

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

我感觉可能是高度脚本或重新排序 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 保持调整大小的块元素的纵横比，性能会更好。查看 this answer.

调整大小不适用于 Firefox

resizing not working on firefox

html

css

firefox

jquery