用鼠标调整表格列的大小

我正在编写一个脚本，允许客户端用鼠标拖动表单元格边界并调整表中列的大小。到目前为止，我在Firefox中有一个工作模型，但在宽度测量方面存在一个缺陷，当变化变大时，鼠标会不同步。更糟糕的是，脚本在其他浏览器（opera、safari）中失败，甚至我在Firefox中更改了浏览器缩放。

function doDrag() {document.body.style.cursor='crosshair';}
function noDrag() {document.body.style.cursor='auto';}
var xpos=0;
var sz=0;
var dragObj = {};
function resizeOn(el) 
    {
    dragObj = document.getElementById(el);
    document.addEventListener("mousemove",resize, true);
    document.addEventListener("mouseup",resizeOff, true);
    }
function resize(ev)
    {
    if(xpos == 0) {xpos=ev.clientX;}
    if(xpos != ev.clientX) 
        {
        sz = dragObj.offsetWidth + (ev.clientX - xpos);
        dragObj.style.width = sz - 10 + "px";
        alert("size="+sz+" offsetwidth="+dragObj.offsetWidth);
        if(dragObj.offsetWidth != sz)
            {
            resizeOff();
            return false;
            }
        xpos=ev.clientX;
        }
    }
function resizeOff() 
    {
    xpos = 0;
    document.removeEventListener("mousemove",resize, true);
    document.removeEventListener("mouseup",resizeOff, true);
    }

HTML看起来像：

<th id="col0" class="edit">client</th>
<th class="drag" onmouseover="doDrag()" onmouseout="noDrag()" onmousedown="resizeOn('col0')"></th>

第二个单元格显示为第一个单元格的右边缘。

我认为问题是dragObj.style.width=sz-10。-10完全是通过反复试验得出的。我怀疑这是单元格的实际宽度（包括边框、填充等）和偏移宽度之间的差异。根据我的css，它实际上应该是10用于填充+1用于左边框=11px。要么是我的固定填充/边框没有保持固定，要么是在元素的offsetWidth和实际with之间有其他css属性。有没有办法在不考虑浏览器缩放的情况下获得元素的实际宽度？