jquery - jQuery position()top在Chrome和Firefox中不同

当我在Chrome和Opera中运行以下小提琴时，position（）。top返回为0，但是Firefox返回1，IE返回0.5。

我怎样才能解决这个问题？

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

脚本：

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

最佳答案

似乎FF只是不认为边框是元素的一部分。作为一种可能的解决方案，您可以使用box-shadow代替：

$(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>