关于margin-left与margin-top的问题

问题是这样的，打算做一个在网页点击右键，然后弹出自定义菜单的东西，是通过获取鼠标当前的坐标，然后再设置margin-left于margin-top的值，达到在哪点击鼠标，就在哪弹菜单的效果。所有东西都弄好了，就是菜单显示的地方x坐标跟y坐标总是多出一点来，效果很是不好。就是比如鼠标的坐标是（100,100），但是菜单也就是DIV的left与top就是（112,119）这样子。
想知道这多出来的一点是从哪多出的，怎么才能解决。

解决方案 »

  1.   

    用margin-left于margin-top来控制popup的位置?为啥不用position+left+top？还有这种功能可以用jquery ui的position utility，很方便
      

  2.   

    建议你用，firefox+firebug,在firebug中有一个layout的功能，你可以把一个元素的位置信息，用标尺在页面上给你显出来，一目了然。功欲善其事，必先利其器.
      

  3.   

    你的意思不太理解，不知道是不是这个意思，我的做法是把div的position:absolute;
    然后设置margin-top与left,你说的是不是，设置left与top？这样的话差的更多。
      

  4.   

    这个工具的确好用，但是他只是显示出了多出的应该是外边距，就是整个body的可显示区域外面还有一个小的边框，然后我设置了body的margin都为0，这样在ie下是没有问题了，但是在FF下一点作用也不起。我感觉问题的主要原因在于，body里面第一个元素显示时不会在网页的最顶端，和最左端显示，会在上面和左面多出一小点来，这一小点的距离跟菜单显示多出的距离是一样的，这样问题就比较明确了：怎么设置让margin忽略掉那个距离，那个距离究竟该怎么设置？
      

  5.   

    你试一下这几个DIV的效果，其实还是不一样的，应该是有你想要的，padding会比margin好一点，因为有边框的影响：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style type="text/css">
    #test1{
    border:thin solid red;
    position:absolute;
    left:100;
    top:100;
    }
    #test2{
    border:thin solid green;
    position:absolute;
    margin-left:100;
    margin-top:100;
    }
    #test3{
    border:thin solid blue;
    position:absolute;
    padding-left:100;
    padding-top:100;
    }
      </style>
     </HEAD>
     <BODY>
    <div id="test1">测试中1</div>  
    <div id="test2">测试中2</div>  
    <div id="test3">测试中3</div>  
     </BODY>
    </HTML>