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>
