jQuery outerHeight返回不正確的值IE

我正在嘗試獲取頁面上元素的高度。我在Mac和FF中獲得了期望值（700px左右），但IE8中的值爲0。我還沒有嘗試早期版本的IE。jQuery outerHeight返回不正確的值IE

HTML：

<section> 
    <article> 
    ... 
    </article>

的javascript：

var height = myElement.outerHeight(true);

有一些事情可能被複雜化這一點。

我試圖衡量元素緊隨其後是動態添加到頁面（該元素是添加作爲Ajax 請求的結果），
我試圖元素測量是一個html5元素（部分）。

我注意到的一件事是插入的html5元素在使用開發人員工具查看時格式不正確。我得到的東西如</article/>。當它加載時頁面的一部分看起來很好。

有些事情我已經在試圖解決問題的嘗試：

我添加CSS應用顯示：塊到所有的HTML5元素
我添加雷米夏普的「HTML5 使腳本」（http://remysharp.com/2009/01/07/html5-enabling-script/）
我使用
我已經嘗試使用所有div代替 HTML5元素
myElement.height()在IE8中返回'auto'的值，而在其他瀏覽器中，我得到一個像素值。 innerHeight()返回null。

感謝

來源

2010-09-24 smabbott

我注意到的一件事是插入的html5元素在使用開發人員工具查看時格式不正確。我得到像</article/>

這不是糟糕的格式，這是開發人員工具告訴你什麼IE DOM的樣子。這是IE瀏覽器無法正確解析HTML5元素，導致元素不在您期望的位置，因此高度和渲染效果不符合您的期望。

會發生什麼事是，IE瀏覽器把未知元素爲始終與EMPTY內容模型的元素：元素如<img/>或<br/>從未有密切的標籤（需要在XHTML自閉合語法）。所以當IE看到<section>時，它創建並關閉section元素。然後下一個元素<article>在之後來到,<section/>和而不是裏面。當IE看到</section>它認爲它不是一個緊密標籤，而是一個空標籤，其名稱是/section（當然這是非常無效的，但是當IE關心它時？）。

因此，不包含任何內容的<section/>元素的高度可能爲零，並且如果您將背景放在該背景上，該背景將不包含<article/>。

尼克提到的，html5shiv可以通過使用createElement暫時欺騙IE瀏覽器以爲它知道<section>是一個真正的元件固定的這些問題一些。但是，這並不能真正覆蓋整個問題，因爲當你開始進一步解析操作，比如設置innerHTML時，它會再次出錯。下一階段是嘗試用innershiv來解決這個問題;這有一些性能上的缺點，所以確保你只在IE上使用它，並且只在你需要的時候（它不像jQuery的html()接口那樣健壯）。

就我個人而言，我並沒有看到太多的麻煩。目前，<section/>並不能真正爲你帶來任何<div class="section">沒有的東西。在未來，可能會有一些工具可以對語義做些事情，並且使IE6-8中的網站看起來完全正確無關緊要。但那一天離IMO還有很長的路要走。

來源

2010-09-24 21:33:50 bobince

非常好。 Innershiv會訣竅。也許我很固執，但我真的希望HTML5在這裏工作。謝謝。 – smabbott 2010-09-27 15:46:19

非常全面的答案。感謝bobince。 – zlovelady 2011-07-22 23:29:30

IE8只需雖然它試圖正確地使它們不支持這些元素......，一些功能將無法正常返回包括尺寸。

這只是支持元素和瀏覽器的瀏覽器之間的差異，你可以嘗試一些HTML5支持庫，比如HTML5 Shiv，這是你最好的選擇。

來源

2010-09-24 21:04:43

jQuery outerHeight返回不正確的值IE

回答

相關問題