Jquery相对于浏览器的偏移值

Question

我有这个

HTML

    <div id="cbox" class="cbox" name="cbox">
    <div id="box" class="box" name="box"></div>
    </div>
   <span id="posX"></span>
  <span id="posmX"></span>
  <span id="posY"></span>
  <span id="posmY"></span>
  <span id="finalX"></span>
  <span id="finalXm"></span>
  <span id="finalY"></span>
  <span id="finalYm"></span>

CSS

#cbox {
width:1350px;
height: 600px;
border:1px solid #000;
position: relative;
}

#box{
    position:absolute;
    top:40%;
    left:25%;
 width: 180px;
  height: 200px;
border:1px solid #000;
background-color: #fff;
padding:10px;
z-index:300;
  }

Javascript

$('#box').draggable({ containment:'parent', cursor:'pointer',drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var xmPos = offset.left + $('#box').outerWidth(); 
            var yPos = offset.top;
            var ymPos = offset.top + $('#box').outerHeight(); 
            $('#posX').text('xmin: ' + xPos);
             $('#posmX').text('xmax: ' + xmPos);
            $('#posY').text('ymin: ' + yPos);
            $('#posmY').text('ymax: ' + ymPos);
        }, 
          stop: function(){
               var finalOffset = $(this).offset();
            var finalxPos = finalOffset.left;
            var finalxmPos = finalOffset.left + $('#box').width();
            var finalyPos = finalOffset.top;
            var finalymPos = finalOffset.top + $('#box').height();

    $('#finalX').text('Final Xmin: ' + finalxPos);
    $('#finalXm').text('Final Xmax: ' + finalxmPos);
    $('#finalY').text('Final Ymin: ' + finalyPos);
    $('#finalYm').text('Final Ymax: ' + finalymPos);
        }

                      });

基本上，当拖动框时，偏移值将被输入到各自的跨度字段中，一切正常，但我注意到偏移值有点高在 ie8+ 和 Opera 上有所不同，我是否可以使所有浏览器上的偏移值相同？ 非常感谢。

Answer 1

我刚刚发现边距和填充值实际上会影响元素的位置和偏移值。