0

I have created the following fiddle to illustrate the problem...

https://jsfiddle.net/scottieslg/q78afsu8/10/

If I run this fiddle in Chrome or Opera, I get a value of 8.

However, when I run it in Firefox, it's coming back as 9.

In IE, I'm getting 8.5.

How can I get all browsers to return the same value?

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;
}
Scottie
  • 11,050
  • 19
  • 68
  • 109

1 Answers1

1

try to make all element same first. 

* {margin:0;padding:0;}
Didin Ahmadi
  • 491
  • 1
  • 7
  • 14