調整大小不能在Firefox上工作

我正在使用jQuery使所有我的div高度相同。（這似乎是我的代碼唯一的解決方案）。我也使用一些CSS來反轉移動div的順序，所以標題總是顯示在圖像下。一切工作完美（調整大小和安排正確）在鉻，狩獵和歌劇。然而，在Firefox中，圖片似乎沒有調整大小，並且所有內容都沒有用。奇怪的是，如果你刷新任何制動器的瀏覽器（在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; 
    } 
}

來源

2015-01-03 Daniel

我認爲這將是更好的性能，如果你將繼續使用純CSS調整塊元素的縱橫比。看看this answer。

來源

2015-01-03 20:59:18

感謝您的建議。我會考慮將來可能實施它。至於這個問題，我只是嘗試過，並沒有解決它。再次感謝。 – Daniel

對於FireFox創建灰度效果，您可以使用灰度過濾器創建固定尺寸的SVG圖像。這就是爲什麼你的塊沒有正確調整大小的原因。您應該更新創建灰度效果的js腳本。 –

是的。我也發現了這一點。讓我試着找到一個不同的灰度解決方案。謝啦。 – Daniel

調整大小不能在Firefox上工作

回答

相關問題