jquery height() on <td> with Internet Exporer

126
January 03, 2018, at 06:31 AM

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.

Answer 1

I believe this is a known bug with (apparently) no fix.

See: https://github.com/adaptlearning/jquery.resize/issues/7

READ ALSO
Bootstrap OffCanvas Menu and Back to Top Jump Link Conflict

Bootstrap OffCanvas Menu and Back to Top Jump Link Conflict

The page I am creating, which is in a bootstrap framework, has a two column layout (col-sm-3 and col-sm-9), at the bottom of this I have a Back To Top button that scrolls the page back to the top of the body tag (id="top" name="top")

200
Fix/Unfix Div when scrolling

Fix/Unfix Div when scrolling

Currently working on a section where there are three rows of contentAn image, a title, and some text

112
Observe scroll event for everything on screen

Observe scroll event for everything on screen

I want to reference everything on screen, to detect for the user scrollingI did this with $(window)

107