[jQuery] offset question

[jQuery] offset question


Hi
the offset function will find the first matched element and show the
offset
but in this case, the ul offset should be 0 to div#demo, but in
firefox it's 8, and in IE is 10
why is that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>offset</title>
<style type="text/css">
<!--
body { font-size: 12px; }
ul
{
    list-style:none;
    margin:0px;
    padding:0px;
    position:absolute;
}
li
{
    float:left;
    margin:0 4px 0 0;
    border:1px solid red;
    width:50px;
    height:50px;
}
#demo
{
    overflow:scroll;
    width:130px;
    height:80px;
    position:relative;
    padding:0px;
}
#test
{
    width:200px;
    height:50px;
    border:1px solid blue;
}
-->
</style>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
</head>
<body>
<div id="test"></div>
<div id="demo">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<div style="clear:both;"></div>
</ul>
</div>
<br />
<input type="button" id="btn" value="btn" />
<script language="javascript">
<!--
    $(document).ready(function()
    {
        var $sum = 0;
        var $demo = $('div#demo');
        var $ul = $('ul',$demo);
        var $test = $('div#test');
        $('ul > li').each(function()
        {
            $sum += $(this).outerWidth(true);
        });
        $('ul').css('width',$sum + 'px');
        $('#btn').click(function()
        {
            $test.html($ul.offset().left);
        });
    });
//-->
</script>
</body>
</html>