搜尋
首頁web前端css教學如何解決火狐在用offsetHeight取得div的高度時為0

火狐在需要取得p的高度時,往往需要用到offsetHeight,有時會碰到offsetHeight取得到為0的現象,下面為大家介紹下比較實用的解決方法,有興趣的朋友可參考下

火狐在需要取得p的高度時,往往需要用到offsetHeight,有時會碰到offsetHeight取得到為0的現象, 

在使用IE或火狐中,特別在目前p css的方式,往往不定義p的高度,這是在添加p內容後,需要取得p的高度時,往往需要用到offsetHeight。

在使用中,有時會碰到offsetHeight取得到為0的現象,但如果你用各種JS調試工具調試,又能在對像中看到值(如果直接指向offsetHeight是沒值的,但如果是物件檢視是有值的,在偵錯器中回車查看物件就已經刷新物件了,所以有值。) 

例如下面片段 

程式碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script language=&#39;javascript&#39;> 
window.attachEvent( "onload", function(){ _resizeScroll2();} ); 
window.onresize=function(){winresize();}; 
function _resizeScroll2(){ 
var html1 = &#39;<p id="pcj" style="margin-top:15px;font-size:10px;width:400px;">&#39; 
+ &#39;<p style="float:left;width:50px;">测试</p>&#39; 
+ &#39;<p style="float:left;width:320px;">danielinbiti</p>&#39; 
+ &#39;</p>&#39; 
+ &#39;<p id="pcj2" style="margin-top:15px;font-size:10px;width:400px;">&#39; 
+ &#39;<p style="width:320px;">danielinbiti</p>&#39; 
+ &#39;</p>&#39; 
document.getElementById(&#39;outer&#39;).innerHTML=html1; 
document.getElementById(&#39;pcj2&#39;).style.display=&#39;none&#39;; 
alert(document.getElementById(&#39;pcj2&#39;).offsetHeight); 
} 
</script> 
</head> 
<body> 
<p id=&#39;outer&#39;></p> 
</body> 
</html>

如果取得pcj的高度,那麼在onload中取得到的是0。因為pcj下有float方式佈局的。 

這時如果p簡單,可以藉助隱藏層,例如這裡的pcj2,把float去掉後,取得到的高度和pcj一樣高。

這裡有一個關鍵點就是float佈局在ie是沒問題,但是對於火狐它取到就為0了

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於HTML5中video標籤瀏覽器相容性增強的方案分享

以上是如何解決火狐在用offsetHeight取得div的高度時為0的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
每周平台新聞:活動時機,網絡的Google Earth,不死會話cookie每周平台新聞:活動時機,網絡的Google Earth,不死會話cookieApr 19, 2025 am 10:57 AM

在本週的新聞中,Wikipedia有助於識別三個慢單擊處理程序,Google Earth進入網絡,CSS中的SVG屬性獲得了更多的支持,以及在殭屍cookies的情況下該怎麼做。

純CSS的多線截斷純CSS的多線截斷Apr 19, 2025 am 10:50 AM

本文中的訣竅仍然非常整潔又聰明,但是現在有一種標準化的方法可以做到這一點,這可能是您最好的選擇。

CSS動畫庫CSS動畫庫Apr 19, 2025 am 10:46 AM

有很多庫希望幫助您在網絡上進行動畫操作。這些是真正幫助您使用語法或的圖書館

顏色輸入:深入研究跨瀏覽器差異顏色輸入:深入研究跨瀏覽器差異Apr 19, 2025 am 10:40 AM

在本文中,我們將查看內部元素內部的結構,瀏覽器的不一致,為什麼它們在某個瀏覽器中以某種方式看起來

將(偽)元素限製到其父元的邊框框將(偽)元素限製到其父元的邊框框Apr 19, 2025 am 10:39 AM

您是否曾經想確保(偽)元素在其父框架之外沒有顯示任何內容?如果您在想像什麼

烤麵包烤麵包Apr 19, 2025 am 10:30 AM

有一天,突然之間,我開始聽到關於吐司的笑話。我不知道上下文是什麼。我以為一些朋友剛開始講吐司笑話,

使用導航警衛保護VUE路線使用導航警衛保護VUE路線Apr 19, 2025 am 10:29 AM

身份驗證是每個Web應用程序的必要組成部分。這是一種方便的手段,我們可以通過它個性化體驗並加載特定於一個的內容

創建交錯動畫的不同方法創建交錯動畫的不同方法Apr 19, 2025 am 10:28 AM

動畫元素最基本的元素非常簡單。定義密鑰幀。命名動畫。將其稱為元素。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。