首先, 看看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 100px; 13 border: 1px solid red; 14 } 15 /*#one>img { 16 height: 200px; 17 }*/ 18 #two { 19 height: 100px; 20 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 100px; 13 border: 1px solid red; 14 } 15 /*#one>img { 16 height: 200px; 17 }*/ 18 #two { 19 height: 100px; 20 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, 同样也不会出现小数啦!!