Whenever I execute the code in the provided fiddle on Chrome and Opera, the position().top is shown as 0. However, Firefox displays it as 1 and IE shows 0.5.
Is there a way to resolve this inconsistency?
http://jsfiddle.net/scottieslg/Loefza24/2/
HTML:
<table id='testTable'>
<thead>
<tr><td>Test</td></tr>
</thead>
<tbody>
<tr><td>Body</td></tr>
</tbody>
</table>
<div id='topPos'></div>
CSS:
* { margin: 0; padding: 0 }
#testTable {
table-layout: fixed;
width: 100%;
padding: 0;
margin: 0;
border-collapse: collapse;
}
#testTable thead tr td {
border: 1px solid #ccc;
}
Script:
$(document).ready(function() {
var topPos = $("#testTable thead tr:nth-child(1)").position().top;
console.log(topPos);
$("#topPos").html("Top: " + topPos);
});