Here is a fiddle I created to demonstrate the issue at hand...
https://jsfiddle.net/scottieslg/q78afsu8/10/
Running this fiddle in Chrome or Opera yields a value of 8.
However, Firefox returns 9, and IE gives 8.5.
How can I ensure consistency across all browsers?
Html
<table id='testTable'>
<thead>
<tr><td>Test</td></tr>
</thead>
<tbody>
<tr><td>Body</td></tr>
</tbody>
</table>
<div id='topPos'></div>
jQuery
$(document).ready(function() {
var topPos = $("#testTable tr:nth-child(1) td:first").position().top;
console.log(topPos);
$("#topPos").html("Top: " + topPos);
});
css
#testTable {
table-layout: fixed;
width: 100%;
padding: 0;
border-collapse: collapse;
}
#testTable thead tr td {
border: 1px solid #ccc;
}