我设计了一个带有标题和正文部分的弹出窗口，并且可以拖动。但问题是每当我开始拖动时，弹出窗口的标题部分都会晃动。它仅在 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>