图片缩放有空白拖影

一张大的图片通过鼠标滚轮缩放的时候，在IE上会出现失真和几条水平空白拖影，失真我倒无所谓，但那水平空白拖影也太影响美观了。
请高手帮忙解决这问题，谢谢！！
<!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>无标题文档</title>
<style type="text/css">
html { overflow: hidden; }
body{
  position:absolute;
   padding:0px;
 margin:0px;
}
</style>
</head><body style="position:absolute;">
<img style=" position:absolute; height:700px; width:1024px;" src="http://hiphotos.baidu.com/lingzeo/pic/item/9528838f61a50cdc513d92ff.jpg" />
<script type="text/javascript" charset="utf-8">
px = function (x)
{
return ''.concat(Math.round(x), 'px');
}
if(window.addEventListener)
document.addEventListener('DOMMouseScroll', function(e) {
zoom(-e.detail);
return false;
}, false);
document.onmousewheel=function(){
zoom(event.wheelDelta);
return false;
}
function zoom(rot){
var imgs=document.getElementsByTagName("img");
var length=imgs.length;
//alert(rot);
  if(rot>0)
  {
    for(i=0;i<length;i++)
     {
    imgs[i].style.height=px(parseInt(imgs[i].style.height)*1.05);
imgs[i].style.width=px(parseInt(imgs[i].style.width)*1.05); }

   }
  else
  {
    for(i=0;i<length;i++)
    {
    imgs[i].style.height=px(parseInt(imgs[i].style.height)*0.98);
imgs[i].style.width=px(parseInt(imgs[i].style.width)*0.98);
}
  }
}
</script></body>
</html>