首先, 看看js獲取元素的高度與jQuery獲取元素的高度的區別, 一下以clientHeight和innerHeight測試
1. js獲取
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body { 8 position: relative; 9 } 10 #one { 11 /*height: 100px;*/ 12 width: 100px; 13 border: 1px solid red; 14 } 15 /*#one>img { 16 height: 200px; 17 }*/ 18 #two { 19 height: 100px; 20 width: 100px; 21 border: 1px solid darkblue; 22 font-size: 150px; 23 24 } 25 </style> 26 </head> 27 <body> 28 <div id="one"> 29 <img src="img/1.jpg"/> 30 </div> 31 <div id="two"> 32 </div> 33 </body> 34 <!--<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>--> 35 <script type="text/javascript"> 36 // var one = $('#one').innerHeight(); 37 // var two = $('#two').innerHeight(); 38 // console.log(one, two); 39 var one = document.getElementById("one"); 40 var two = document.getElementById("two"); 41 var oneH = one.firstElementChild.offsetHeight; 42 var twoH = two.clientHeight; 43 console.log(oneH, twoH); 44 </script> 45 </html>
打印結果: 火狐瀏覽器下打印oneH:750, twoH:100; 而在谷歌瀏覽器下打印oneH: 0, two:100. 由此可以看出, 谷歌在獲取元素的內部高度時, 沒有把其子元素的圖片高度加上. 這樣說對嗎? 顯然, 有待斟酌......
這次我們把樣式中設定的圖片高度打開, 結果.....
谷歌: 
火狐: 
火狐和谷歌竟然一致的統一了!
此時, 可以看出, 涉及獲取元素的問題, 如果內部圖片要設定高度, 否則, 會出現兼容的問題
2.jQuery獲取
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body { 8 position: relative; 9 } 10 #one { 11 /*height: 100px;*/ 12 width: 100px; 13 border: 1px solid red; 14 } 15 /*#one>img { 16 height: 200px; 17 }*/ 18 #two { 19 height: 100px; 20 width: 100px; 21 border: 1px solid darkblue; 22 font-size: 150px; 23 24 } 25 </style> 26 </head> 27 <body> 28 <div id="one"> 29 <img src="img/1.jpg"/> 30 </div> 31 <div id="two"> 32 </div> 33 </body> 34 <script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script> 35 <script type="text/javascript"> 36 var one = $('#one').innerHeight(); 37 var two = $('#two').innerHeight(); 38 console.log(one, two); 39 // var one = document.getElementById("one"); 40 // var two = document.getElementById("two"); 41 // var oneH = one.firstElementChild.offsetHeight; 42 // var twoH = two.clientHeight; 43 // console.log(oneH, twoH); 44 </script> 45 </html>
未設定圖片高度之前(原圖片高度為750)
打印結果:
谷歌: 
火狐: 
谷歌為one:752, two: 100, 火狐為: 754, 100. 對的, 怎么會這樣? 怎么會有誤差. 這個是因為圖片在父元素中默認垂直對齊方式是以基線對齊的, 把圖片對齊方式設置為vertical-align: bottom就OK了, 這時, 再打印兩個高度都為750, 同樣也不會出現小數啦!!