js特效出現的問題

在做訂餐系統的時候,我想做一個特效,如下

 點選菜品圖檔時圖檔會放大

 核心思路:是在原圖的上面顯示一個div,這個div中有image标簽用于顯示大圖,當然div和原圖不在同一個圖層(通過z-index 實作).

并且div和image的width和height是相同的

<div style="top: 150px; left: 552px; width: 400px; height: 250px; display: block;" id="loadpanel"><img src="assets/uploads/product/imgpath_1413547702_337.jpg" width="400px" height="250px"></div>  

 但是在ie 9 中顯示有問題

 ie 中出現了水準滾動條和豎直滾動條!!!

ie9的具體版本:

怎麼辦呢?

我的思路是:判斷浏覽器類型,如果是ie,則設定div的width在img的width加上3px, 設定div的height在img的height加上2px, 

 showloadpanel = function(imgsic,movetop22,moveleft22){  

    // $("#loadpanel").height($(document).height());  

        var key222='assets/uploads/product';  

        if(com.whuang.hsj.contains(imgsic,key222)){  

            var index22=imgsic.indexof(key222);  

            imgsic=imgsic.substring(index22);  

            // alert(imgsic);  

        }  

        var widthstr=400;  

        var heightstr=250;  

        var childelement="<img src=\""+imgsic+"\"  width=\""+widthstr+"px\"  height=\""+heightstr+"px\" />";  

        // alert(childelement);  

        $("#loadpanel").html(childelement);  

        // $("#loadpanel").css("background-image", "url(\""+imgsic+"\")");  

        $("#loadpanel").css("top",movetop22-20);  

        $("#loadpanel").css("left",moveleft22-20);  

        if(isietest){//如果是ie  

            widthstr+=3;  

            heightstr+=2;  

        $("#loadpanel").css("width",widthstr+"px");//比widthstr大一些  

        $("#loadpanel").css("height",heightstr+"px");//比heightstr大一些  

        $("#loadpanel").click(function(){  

            hideloadpanel();  

        });  

        $("#loadpanel").show('normal');  

};  

 div的id是loadpanel,對應的css:

#loadpanel {  

    overflow-y: auto;  

    overflow-x: auto;  

    /*width: 400px;*/  

    /*height: 250px;*/  

    position: absolute;  

    background-color: #9c89cb;  

    z-index: 99999;  

    background-repeat: no-repeat;  

    background-position: center;  

}  

 最後解決了問題: