jQuery的高度相等列 - 列間歇破DOM

之外我的簡化代碼是這樣的：jQuery的高度相等列 - 列間歇破DOM

<div class="equal clearfix"> 
    <section class="secondary column clearfix"> 
    </section> 
    <section class="primary column clearfix"> 
     <div id="map_canvas" style="width:520px; height:350px;" class="google-map"></div> 

     <div> 
      <a href="#" class="overlayed-link">link</a> 
      <img src="/images/image.jpg" class="image" /> 
     </div> 
     <div> 
      <a href="#" class="overlayed-link">link</a> 
      <img src="/images/image2.jpg" class="image" /> 
     </div> 
    </section> 
</div><!-- /.equal --> 
<footer>Blah</footer>

然後，我有我的JavaScript/jQuery的：

$(document).ready(function() { 
    $('.equal').each(function(){ 
     var highestBox = 0; 
     $('.column', this).each(function(){ 
      if($(this).height() > highestBox) 
       highestBox = $(this).height(); 
     }); 
     $('.column',this).height(highestBox); 
    }); 
});

這一切的偉大工程。但隨後SOMETIMES，只有有時......只有在谷歌瀏覽器，該主塔，一個在它的圖像，休息過去的頁腳。

當我在Chrome原生開發工具已經檢查了，我可以看到它是不是列破過去的頁腳，但只有圖像本身。實際上這些列的高度應該是相等的（它不是正確的高度）。頁腳位於DOM的底部，它應該在那裏。從技術上講，一切都已到位，但該列中的最終圖像位於DOM中的所有內容之下，包括結束的HTML標記。

我想那一定是JavaScript的問題，但沒有任何錯誤。有沒有人遇到過它？

這似乎是完全隨機的，但在瀏覽器中打開一個新的標籤，加載頁面時發生最。如代碼所示，還可能值得注意的是那裏有一個Google Map。

來源

2014-04-17 user1100149

請提供jsfiddle – justtal

嗯，讓你的圖像固定大小？如果是，請嘗試在圖像標籤中設置尺寸（寬度和高度）。我有一些類似的問題與更新的Firefox版本。 – Homungus

感謝您的幫助。我希望它現在已經被修復了（請參閱下面的答案），但是如果沒有，我可能會嘗試圖像上的高度。雖然它們都是不同的並且動態加載，但可能很難！ – user1100149

我想我已經用$(window).load()更換我$(document).ready()，以確保一切，包括我的所有資產（圖片，地圖等）的解決它，列上設置任何高度之前被加載。

我已經加載了至少100次的頁面，現在沒有問題。所以它看起來很積極。（如果事實證明我沒有解決，我會回來更新這個答案）。

來源

2014-04-17 14:07:51 user1100149

的問題是，文件準備將盡快爲所有的HTML，腳本和CSS文件解析火。但是，它可能在您的圖像加載之前觸發。除非已通過CSS /已棄用的HTML屬性給定了固定高度，否則它們可能會破壞您的腳本。

的load事件觸發後，所有的頁面內容加載，包括圖像。這就是爲什麼你的改變後它才能工作。

來源

2014-04-17 14:14:34 UweB

jQuery的高度相等列 - 列間歇破DOM

回答

相關問題