Javascript 计算的宽度有时缺少一些像素

我有一个脚本可以计算元素的宽度：

function CalculateWidth(content, style) {
    var mySpanSize = 0;

    try {
        var span = document.createElement('SPAN');
        span.innerHTML = content;
        span.style.cssText = style;

        document.body.appendChild(span);
        mySpanSize = span.offsetWidth;
        document.body.removeChild(span);
    } catch (err) {
        return 0;
    }

    return mySpanSize;
}

内容

是HTML格式的文本，例如：

<font size="2">Some text here.<br/>Some another text. Another text</font>

这个函数起作用了。。以某种方式但计算出的宽度有时缺少20到50个像素，以使目标容器的宽度适合

内容

如何解决这个问题（除了返回时的一些黑客
+50
））

我不能使用jquery或任何其他JS库。

@编辑[2015-08-13]

示例
content
（全部以单行形式传递）：

中间的BR是正确的大小，我不可能修改内容。我只能在JS功能上胜过“用户”（可能还有助手，但不能超过libs）。没有其他方法吗？请注意，
多年前就已经被弃用了，不应该再使用了。您的问题可能部分是由于
字体
及其
大小
属性造成的？可能是的，但正如我所说的，我根本无法修改
内容
，而且
内容
99%的时间都与
一起出现。基本上，您的HTML无效，而且它不能保证浏览器能够正确显示其内容或计算其尺寸。在函数中，您可以在将内容附加到正文之前删除
font
标记，并在样式部分设置字体大小。至少值得一试。中间的BR是正确的大小。我不可能修改内容。我只能在JS功能上胜过“用户”（可能还有助手，但不能超过libs）。没有其他方法吗？请注意，
多年前就已经被弃用了，不应该再使用了。您的问题可能部分是由于
字体
及其
大小
属性造成的？可能是的，但正如我所说的，我根本无法修改
内容
，而且
内容
99%的时间都与
一起出现。基本上，您的HTML无效，而且它不能保证浏览器能够正确显示其内容或计算其尺寸。在函数中，您可以在将内容附加到正文之前删除
font
标记，并在样式部分设置字体大小。至少值得一试。
border: 1px solid black; 
margin-top: 8px; padding: 
5px; text-align: left;

<font size="2">XX: XXXXX<br>XXXX XXXX: XXXXXXX<br>XXXXXXXX: XXXXXXX XXXXXXXXX (XX-XXX XXXXXX, XXXXXX (XX. XX.XXX/XX) )<br>XXXXXX: XX XXXXXXXX<br>XXXXXXXX XX: XXXXXXXXXXX XXXXXXX</font>

border: 1px solid black;
margin-top: 8px;
background: #F5F5F5;
padding: 5px;
text-align: left;