这段JavaScript在IE与Chrome的运行效果不一样。

<script>
var s=90;
var minheight=100;
var maxheight=320;
function shoppingcat(){
var key = document.getElementById("key").innerhtml;
if(key=="APP"){
iphone.style.pixelHeight+=s;
if(iphone.style.pixelHeight<maxheight){
setTimeout("shoppingcat();",1);
}else{
document.getElementById("key").innerhtml="CLOSE";
}
}else{
iphone.style.pixelHeight-=s;
if(iphone.style.pixelHeight>minheight){
setTimeout("shoppingcat();",1);
}else{
document.getElementById("key").innerhtml="APP";
}
}
}
</script>在Chrome浏览器中，点击一次图标即可滑出全部的框内容。
可是在IE中浏览器中，点击图标第一次，本来显示的内容会消失，再点击一次，才全部框内容滑出。之后的点击才开始与Chrome一开始的效果一样。这个自己画的IE效果图与Chrome效果图的对比。
这是为什么呢？
我怀疑是这段JavaScript在IE的兼容性问题，可是不知道怎样解决。
希望各位帮小妹解答一下。
谢谢！

解决方案 »

  1.   

    浏览器的计时器精度有区别。
    你可以试试调整一下setTimeout的间隔。
      

  2.   

    document.getElementById("key").innerhtml;
    是innerHTML
      

  3.   


    也不关innerHTML的事。
    需要点击的地方应该是一个图的，如果改成innerHTML了，一点击图就变成了APP,再点就变成CLOSE，
    而且弹出效果还是与之前的一样。
      

  4.   

    你把你的html代码也晒出来吧 还是得结合你的整个html代码 看你之前都赋了什么样式？
      

  5.   

    <!-- saved from url=(0086).index.html -->
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>index</title>
    <!-- Docking boxes (dbx) by Brothercake - http://www.brothercake.com/ -->
    <script type="text/javascript" src="./tsjss/dbx.js"></script>
    <!-- dbx stylesheet -->
    <link rel="stylesheet" type="text/css" href="./tsjss/iphone.css" media="screen, projection">
    <!-- styles unrelated to docking boxes demo -->
    <link rel="stylesheet" type="text/css" href="./tsjss/etc.css" media="screen, projection"><style type="text/css">
    <!--
    body {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    background-color: #000000;

    }
    #Layer1 {
    position:absolute;
    width:13px;
    height:11px;
    z-index:1;
    left: 575px;
    top: 169px;
    }
    #Layer2 {
    position:absolute;
    width:474px;
    height:346px;
    z-index:1;
    left: 451px;
    top: 68px;
    }-->
    </style>
    <style type="text/css">
    body,span,div,td{
    font-size:12px;
    line-height:1.5em;
    color:#849BCA;
    margin-bottom: 1px;
    }
    #bodyL{
     float:left;
     width:84px;
     margin-right:2px;
    }
    a.od{
     width:80px;
     height:25px;
     line-height:25px;
     text-align:center;
     font-weight:bold;
     border: 2px solid #849BCA; 
     display:block;
     color:#547BC9;
     float:left;
     text-decoration:none;
     margin-top:2px;
    }
    a.od:link{
     background:#EEF1F8;
    }
    a.od:visited{
     background:#EEF1F8;
    }
    a.od:hover{
     background:#EEE;
    }
    a.od:active{
     background:#EEE;
    }
    #fd{ 
     width:500px;
     height:200px;
     background:#EDF1F8; 
     border: 2px solid #849BCA;
     margin-top:2px;
     margin-left:2px;
     float:left;
     overflow:hidden;
     position:absolute;
     left:0px;
     top:0px;
     cursor:move;
     float:left;
     /*filter:alpha(opacity=50);*/
    }#ku{ 
     width:500px;
     height:200px;
     background:#EDF1F8; 
     border: 1px solid #849BCA;
     margin-top:2px;
     margin-left:2px;
     float:left;
     overflow:hidden;
     position:absolute;
     left:0px;
     top:0px;
     cursor:move;
     float:left;
     /*filter:alpha(opacity=50);*/ 
    }
    .content{
     padding:10px;
    }#Layer3 {
    position:absolute;
    width:37px;
    height:12px;
    z-index:2;
    left: 524px;
    top: 168px;
    }#dh {
    width:300px;
    height:auto;
    margin-left:200px;
    }
    #Layer4 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:3;
    left: 841px;
    top: 36px;
    }
    </style>
    </head>
    <body><div id="Layer1">
      <div id="fd" style="display: none; width: 500px; height: 335px; left: 6px; top: 4px; opacity: 1;"><table id="__01" width="501" height="301" border="0" cellpadding="0" cellspacing="0">
    <tbody><tr>
    <td colspan="15">
    <img src="./index_files/daoh_01.png" width="500" height="31" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="31" alt=""></td>
    </tr>
    <tr>
    <td colspan="9">
    <img src="./index_files/daoh_02.png" width="312" height="3" alt=""></td>
    <td colspan="2" rowspan="3">
    <a href="bumeng.html" target="a"><img src="./index_files/daoh_03.png" alt="" width="52" height="50" border="0"></a></td>
    <td colspan="4" rowspan="5">
    <img src="./index_files/daoh_04.png" width="136" height="99" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
    <td colspan="3" rowspan="5">
    <img src="./index_files/daoh_05.png" width="128" height="98" alt=""></td>
    <td colspan="3">
    <a href="enterprise.html" target="a"><img src="./index_files/daoh_06.png" alt="" width="63" height="45" border="0"></a></td>
    <td colspan="3" rowspan="3">
    <img src="./index_files/daoh_07.png" width="121" height="91" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="45" alt=""></td>
    </tr>
    <tr>
    <td colspan="3" rowspan="8">
    <img src="./index_files/daoh_08.png" width="63" height="126" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="8">
    <img src="./index_files/daoh_09.png" width="52" height="126" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="44" alt=""></td>
    </tr>
    <tr>
    <td rowspan="10">
    <img src="./index_files/daoh_10.png" width="22" height="175" alt=""></td>
    <td rowspan="4">
    <a href="home-page.html" target="a"><img src="./index_files/daoh_11.png" alt="" width="67" height="51" border="0"></a></td>
    <td rowspan="10">
    <img src="./index_files/daoh_12.png" width="32" height="175" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="5" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="6">
    <img src="./index_files/daoh_13.png" width="37" height="77" alt=""></td>
    <td rowspan="4">
    <a href="team-list.html" target="a"><img src="./index_files/daoh_14.png" alt="" width="55" height="49" border="0"></a></td>
    <td rowspan="9">
    <img src="./index_files/daoh_15.png" width="44" height="170" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
    <td rowspan="8">
    <img src="./index_files/daoh_16.png" width="42" height="168" alt=""></td>
    <td>
    <a href="bm-list.html" target="a"><img src="./index_files/daoh_17.png" alt="" width="56" height="38" border="0"></a></td>
    <td rowspan="8">
    <img src="./index_files/daoh_18.png" width="30" height="168" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
    <td rowspan="7">
    <img src="./index_files/daoh_19.png" width="56" height="130" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="6" alt=""></td>
    </tr>
    <tr>
    <td rowspan="6">
    <img src="./index_files/daoh_20.png" width="67" height="124" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
    <td rowspan="5">
    <img src="./index_files/daoh_21.png" width="55" height="121" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="26" alt=""></td>
    </tr>
    <tr>
    <td rowspan="4">
    <img src="./index_files/daoh_22.png" width="6" height="95" alt=""></td>
    <td rowspan="2">
    <a href="sp.html" target="a"><img src="./index_files/daoh_23.png" alt="" width="48" height="52" border="0"></a></td>
    <td rowspan="4">
    <img src="./index_files/daoh_24.png" width="9" height="95" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
    <td rowspan="3">
    <img src="./index_files/daoh_25.png" width="3" height="93" alt=""></td>
    <td colspan="2" rowspan="2">
    <a href="team.html" target="a"><img src="./index_files/daoh_26.png" alt="" width="53" height="53" border="0"></a></td>
    <td rowspan="3">
    <img src="./index_files/daoh_27.png" width="33" height="93" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="50" alt=""></td>
    </tr>
    <tr>
    <td rowspan="2">
    <img src="./index_files/daoh_28.png" width="48" height="43" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
    <td colspan="2">
    <img src="./index_files/daoh_29.png" width="53" height="40" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="1" height="40" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="./index_files/分隔符.gif" width="42" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="56" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="30" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="6" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="48" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="9" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="22" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="67" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="32" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="3" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="49" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="4" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="33" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="55" height="1" alt=""></td>
    <td>
    <img src="./index_files/分隔符.gif" width="44" height="1" alt=""></td>
    <td></td>
    </tr>
    </tbody></table><a href="#" class="od" onClick="closeed(&#39;fd&#39;);return false;">
      [关闭]
     </a>
    </div>
    </div>
      

  6.   

    <!--应用库div-->
    <div id="Layer3">
      <div id="ku" style="display: none; width: 500px; height: 335px; left: 6px; top: 4px; opacity: 1;"><input name="" type="image" src="../img/images/应用库.jpg">
    <a href="#" class="od" onClick="closeed(&#39;ku&#39;);return false;">
      [关闭]
     </a>
    </div>
    </div>
    <div id="Layer4">
    <form id="iphone" action="" method="get">
    <fieldset class="dbx-group" id="desktop" style="position: relative; display: block; ">
    <span class="dbx-box dbx-box-open dbxid-0  first-child" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/01.png" alt="" id="Calendar" name="Calendar" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>01</em>
    </span><span class="dbx-box dbx-box-open dbxid-6" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/02.png" alt="" id="Notes" name="Notes" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>02</em>
    </span><span class="dbx-box dbx-box-open dbxid-9" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/03.png" alt="" id="Weather" name="Weather" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>03</em>
    </span><span class="dbx-box dbx-box-open dbxid-10 " style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/04.png" alt="" id="Maps" name="Maps" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>04</em>
    </span><span class="dbx-box dbx-box-open dbxid-14" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/05.png" alt="" id="AppStore" name="AppStore" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>05</em>
    </span><span class="dbx-box dbx-box-open dbxid-8" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/06.png" alt="" id="Clock" name="Clock" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>06</em>
    </span><span class="dbx-box dbx-box-open dbxid-1" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/07.png" alt="" id="Mail" name="Mail" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>07</em>
    </span><span class="dbx-box dbx-box-open dbxid-13" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/08.png" alt="" id="Camera" name="Camera" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>08</em>
    </span><span class="dbx-box dbx-box-open dbxid-2" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/09.png" alt="" id="Remote" name="Remote" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>09</em>
    </span><span class="dbx-box dbx-box-open dbxid-5" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/10.png" alt="" id="Photos" name="Photos" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>10</em>
    </span><span class="dbx-box dbx-box-open dbxid-15 " style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/11.png" alt="" id="Settings" name="Settings" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>11</em>
    </span><span class="dbx-box dbx-box-open dbxid-3" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/12.png" alt="" id="Contacts" name="Contacts" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>12</em>
    </span><span class="dbx-box dbx-box-open dbxid-7" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/13.png" alt="" id="Calculator" name="Calculator" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>13</em>
    </span><span class="dbx-box dbx-box-open dbxid-4" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/14.png" alt="" id="Videos" name="Videos" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>14</em>
    </span><span class="dbx-box dbx-box-open dbxid-11" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/15.png" alt="" id="Stocks" name="Stocks" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>15</em>
    </span><span class="dbx-box dbx-box-open dbxid-12 last-child" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/16.png" alt="" id="YouTube" name="YouTube" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>16</em>
    </span><span class="dbx-box dbx-dummy dbx-offdummy" style="display: block; width: 0px; height: 0px; overflow-x: hidden; overflow-y: hidden; "></span></fieldset>

    </form>
    </div>
      

  7.   

    晒出关键代码，你的script和你的图的表现有出入。需要相关部分的HTML代码。
      

  8.   

    <div id="Layer4">
    <form id="iphone" action="" method="get">
    <fieldset class="dbx-group" id="desktop" style="position: relative; display: block; ">
    <span class="dbx-box dbx-box-open dbxid-0 first-child" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/01.png" alt="" id="Calendar" name="Calendar" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>01</em>
    </span><span class="dbx-box dbx-box-open dbxid-6" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/02.png" alt="" id="Notes" name="Notes" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>02</em>
    </span><span class="dbx-box dbx-box-open dbxid-9" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/03.png" alt="" id="Weather" name="Weather" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>03</em>
    </span><span class="dbx-box dbx-box-open dbxid-10 " style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/04.png" alt="" id="Maps" name="Maps" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>04</em>
    </span><span class="dbx-box dbx-box-open dbxid-14" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/05.png" alt="" id="AppStore" name="AppStore" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>05</em>
    </span><span class="dbx-box dbx-box-open dbxid-8" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/06.png" alt="" id="Clock" name="Clock" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>06</em>
    </span><span class="dbx-box dbx-box-open dbxid-1" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/07.png" alt="" id="Mail" name="Mail" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>07</em>
    </span><span class="dbx-box dbx-box-open dbxid-13" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/08.png" alt="" id="Camera" name="Camera" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>08</em>
    </span><span class="dbx-box dbx-box-open dbxid-2" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/09.png" alt="" id="Remote" name="Remote" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>09</em>
    </span><span class="dbx-box dbx-box-open dbxid-5" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/10.png" alt="" id="Photos" name="Photos" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>10</em>
    </span><span class="dbx-box dbx-box-open dbxid-15 " style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/11.png" alt="" id="Settings" name="Settings" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>11</em>
    </span><span class="dbx-box dbx-box-open dbxid-3" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/12.png" alt="" id="Contacts" name="Contacts" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>12</em>
    </span><span class="dbx-box dbx-box-open dbxid-7" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/13.png" alt="" id="Calculator" name="Calculator" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>13</em>
    </span><span class="dbx-box dbx-box-open dbxid-4" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/14.png" alt="" id="Videos" name="Videos" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>14</em>
    </span><span class="dbx-box dbx-box-open dbxid-11" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/15.png" alt="" id="Stocks" name="Stocks" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>15</em>
    </span><span class="dbx-box dbx-box-open dbxid-12 last-child" style="position: relative; display: block; ">
    <input class="dbx-handle dbx-handle-cursor" src="app/16.png" alt="" id="YouTube" name="YouTube" type="image" style="position: relative; display: block; " title="click-down and drag to move this icon">
    <em>16</em>
    </span><span class="dbx-box dbx-dummy dbx-offdummy" style="display: block; width: 0px; height: 0px; overflow-x: hidden; overflow-y: hidden; "></span></fieldset></form>
    </div>
    这段代码就是效果图粉色与红色部分的内容。
      

  9.   

    <script>
    var s=90;
    var minheight=100;
    var maxheight=320;
    function shoppingcat(){
    var key = document.getElementById("key").innerhtml;
    if(key=="APP"){
    iphone.style.pixelHeight+=s;
    alert('APP:'+iphone.style.pixelHeight)
    if(iphone.style.pixelHeight<maxheight){
    setTimeout("shoppingcat();",1);
    }else{
    document.getElementById("key").innerhtml="CLOSE";
    }
    }else{
    iphone.style.pixelHeight-=s;alert('CLOSE:'+iphone.style.pixelHeight)if(iphone.style.pixelHeight>minheight){
    setTimeout("shoppingcat();",1);
    }else{
    document.getElementById("key").innerhtml="APP";
    }
    }
    }
    </script>看看上面输出是什么真相只有一个
      

  10.   


    第一次点击指定处，弹出CLOSE-90
    第二次点击指定处，弹出APP-90
    第三次只能点击确定，弹出APP:0　与全部内容：
    第四次只能点击确定，弹出APP:90
    第五次只能点击确定，弹出APP:180(往后的都只能点击确定，并以90递增展开，当到达270时点击则以90递减关闭)
    有何解决方法？