jquery height() on <td> with Internet Exporer

I have an issue getting the correct height (using .height() with jquery 3) of an td elelement in Internet Exporer 11 / Edge.

$('#h1').text($('#cell').height()); 
$('#h2').text($('#cell').outerHeight()); 
$('#h3').text($('#cell')[0].clientHeight);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<table> 
   	    <tr> 
   		    <td id="cell" style="height: 100px; border: 1px solid red;"> 
   			    	foo 
   		</td> 
   	    </tr> 
</table> 
 
<hr> 
 
<pre> 
$('#cell').height(): <span id="h1"></span> 
$('#cell').outerHeight(): <span id="h2"></span> 
$('#cell')[0].clientHeight: <span id="h3"></span> 
</pre>

The output in chome is as I expected it:

$('#cell').height(): 100
$('#cell').outerHeight(): 104
$('#cell')[0].clientHeight: 102

But in IE I get:

$('#cell').height(): 18.4
$('#cell').outerHeight(): 22.4
$('#cell')[0].clientHeight: 98

Of course there are workarounds but I want to understand whats going on here. Whats the idea of these numbers and in which cases .height() will return these? Jquery 1.x and 2.x serve my expected result as chrome with 3.x does. So far I was able to reproduce it with td-elements only.