jQuery .height（）鉻問題

我一直在使用jQuery的高度函數。但是在獲得我的div元素的正確高度時出現問題。這div元素的高度設置爲auto，這意味着div的高度僅取決於它的內部元素。當我試圖在我的網頁使用.height()，我得到了以下結果：jQuery .height（）鉻問題

Chrome: 1276 px 
Firefox: 1424 px

但是當你看到他們倆它們具有相同的高度。唯一的是height()函數返回不同的結果。

下面的代碼：

<div class="single-mid" style="position:relative;width:700px;margin:-1px 0 0 1px;padding-right:56px;"> 
    <div>Sample Inside Element</div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    var less_height = $('.single-mid').height() -10; 
    $('.single-mid').height(less_height); 
}); 
</script>

但我試圖設置div的高度爲1424px。兩個瀏覽器都返回相同的結果。

任何想法？提前致謝。

來源

2010-08-19 Trez

請提供一個鏈接或演示。 – 2010-08-19 03:11:17

我還沒有上傳到現場。我目前正在本地主機上工作。 – Trez 2010-08-19 03:13:38

它似乎是由兩個瀏覽器中不同的默認字體引起的。如果您添加以下CSS到你的榜樣，其結果將是兩個Firefox和Chrome /鐵一樣的：

<style type="text/css"> 
    div { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 2em; 
    } 
</style>

你也許可以使用CSS reset和自己定義的樣式。這可以讓你更好地控制如何讓它在大多數瀏覽器中看起來一樣。

來源

2010-08-19 09:19:42

我第二個格特。如果你不玩百分比的字體大小，它可以正常工作。 – cbloss793 2015-09-24 21:14:07

有同樣的問題。但是如果我在進行hight檢查之前做了一個簡短的setTimeout延遲，Chrome開始報告與firefox相同的高度。在完全確定內容將如何改變容器的實際大小之前，似乎chrome會觸發文檔就緒狀態......！在任何情況下，我的修補程序是改變我：

$(document).ready(...

到：

$(window).load(...

不觸發，直到「所有子元素已經完全加載」（從http://api.jquery.com/load-event/）。

來源

2012-06-12 23:19:30 Kory

謝謝Kory！這是所有最簡單的解決方法，它避免了一堆俗氣，冗長的html來明確定義div高度。你讓我今天一整天都感覺很好。 – AdrianB 2012-08-07 22:15:12

這發生在我身上，原因是我在div那個圖像中有些圖像的高度並沒有height屬性設置。

$(window).load(確實爲我工作，但造成了太多的延遲，我想做的事情。

來源

2012-10-16 13:24:07

要做兩分法固定高度Chrome和IE

jQuery(document).ready(function() { 
    // your code here 
});

而且

jQuery(window).load(function(){ 
    // your code here 
});

來源

2016-02-18 04:04:25

我曾與引導下拉菜單中同樣的問題的元素必須是高度標準化。對於一些菜單（不是全部），jquery沒有返回正確的高度，導致不正常的標準化。這是因爲下拉菜單在正常化期間被隱藏。看起來CHROME和FIREFOX在隱藏元素時不能正確計算高度。 IE在這種情況下似乎更好。

爲了解決這個問題，我有加（然後刪除）引導類「開放」所有的菜單，以使它們正常化過程中可見：

$(window).on("load resize orientationchange", function() { 
     $(".dropdown").addClass("open"); 
     normalize_all(); 
     $(".dropdown").removeClass("open"); 
    });

來源

2017-11-28 13:25:30

jQuery .height（）鉻問題

回答

相關問題