弹出标题在IE中拖动时摇晃

Question

我设计了一个带有页眉和正文部分的弹出窗口，并且可以拖动。但是问题是，每当我开始拖动时，弹出窗口的标题部分就会晃动。它仅在IE中发生，但在Google Chrome中运行良好。

这是我的代码：

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
  .irmNMsgLog{
    display:none;
    border:8px solid rgba(0,0,0,0.5);
    box-shadow:0px 0px 10px #676767;
    border-radius:5px;
    width:400px;        
    position:absolute;
    z-index:999999; 
    background:#e5e5e5; 
   }
   .irmNMsgLogHeader{
    cursor:move;
    width:100%; 
    color:#fff;
    background:#ba0101;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType="0",startColorStr="#ba0101",
      endColorStr="#870101");
    background: -webkit-gradient(linear, left top, left bottom, from(#ba0101), to(#870101)); 
    background: -moz-linear-gradient(top,#ba0101,#870101);
    font-size:0.8em;
   }
   .irmNMsgLogHeader table{
     border-collapse:collapse;
    }
  .irmNMsgLogHeader td{
   font-weight:bold !important;
   padding:2px 5px;
  }
  .irmNMsgLogHeader td:last-child{
    background:url('close.gif') 50% 50% no-repeat;
    width:20px;
    height:20px;
    cursor:pointer !important;  
   }
   .irmNMsgLogHeader td:last-child:hover{
     background:url('close-over.gif') 50% 50% no-repeat;
   }     
</style>

<div class="irmNMsgLog">
 <div class="irmNMsgLogHeader irmNText">
  <table width="100%" cellpadding=0 cellspacing=0><tr><td width="93%">Messages(4)</td><td title="Close"></td></tr></table>
 </div> 

 <div class="irmNMsgLogBody irmNText">
  <table width="100%">
   <tr><td class="irmNMsgLogImgError"></td><td>Enter valid email</td></tr>
   <tr><td class="irmNMsgLogImgWarn"></td><td>Enter valid email</td></tr>
   <tr><td class="irmNMsgLogImgInfo"></td><td>Enter valid email</td></tr>
  </table>
 </div> 
</div>
<script>
$(this).draggable({containment:"document",cancel:".irmNMsgLogBody"});
</script>

Answer 1

这是您所期望的吗？

http://fiddle.jshell.net/pAeBW/