css - jQuery position() top is different in Chrome and Firefox -

when run following fiddle in chrome , opera, position().top returned 0, firefox returning 1 , ie return 0.5.

how can fix this?

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); }); 

it seems ff doesn't consider border part of element. possible solution can use box-shadow instead:

$(document).ready(function() {      var toppos = $("#testtable thead tr:nth-child(1)").position().top;      console.log(toppos);      $("#toppos").html("top: " + toppos);  });

* { margin: 0; padding: 0 }  #testtable {      table-layout: fixed;      width: 100%;      padding: 0;      margin: 0;      border-collapse: collapse;  }    #testtable thead tr td {       box-shadow:0px 0px 0px 1px #ccc inset;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id='testtable'>      <thead>          <tr><td>test</td></tr>      </thead>        <tbody>          <tr><td>body</td></tr>      </tbody>  </table>    <div id='toppos'></div>