JS不能减小height到0


我想写个特效，用JS控制 DIV 的 width 、height属性，但是发现最后 height alert出来已经减小到0了，页面还有一段，看着很不爽，目前效果如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
    
    <style type="text/css">#btnDiv{
position: absolute;
top: 400px;
left: 600px;
}#main{
position: absolute;
top: 100px;
left: 600px;

}
</style><script type="text/javascript">function small(){
//隐藏当前层
var objDiv = document.getElementById("main");
objDiv.style.display = "none";
//创建特效层
var newDiv = document.createElement("div");
newDiv.setAttribute("id","newDIV");
//newDiv.innerHTML = "abc";
newDiv.style.position = "absolute";
newDiv.style.top = "100px";
newDiv.style.left = "600px";
newDiv.style.width = "300px";
newDiv.style.height = "180px";
newDiv.style.border = "1px dashed black";
document.body.appendChild(newDiv);
//特效
effectSmall();
}function effectSmall(){
var newDiv = document.getElementById("newDIV");
//alert(parseInt(newDiv.style.width)); //300

if(parseInt(newDiv.style.width) > 0){
var tempWidth = 0;
if(parseInt(newDiv.style.width) >= 5){
tempWidth = parseInt(newDiv.style.width) - 5;
}else{
tempWidth = 0;
}
newDiv.style.width = tempWidth + 'px';

var tempHeight = 0;
if(parseInt(newDiv.style.height) >= 3){
tempHeight = parseInt(newDiv.style.height) - 3;
}else{
tempHeight = 0;
}
newDiv.style.height = tempHeight + 'px';

timer = setTimeout('effectSmall()',10);
}else{
newDiv.style.display = "none";
}
if(parseInt(newDiv.style.height) < 30){
alert(parseInt(parseInt(newDiv.style.width) + "\t" + newDiv.style.height));
}
}function big(){

clearTimeout(timer);

var objDiv = document.getElementById("main");
objDiv.style.display = "block";

var newDiv = document.getElementById("newDIV");
document.body.removeChild(newDiv);

}</script>  </head>
  
  <body>
    
<div id="main">
<table border="1px solid #345323" style="width: 300px; height: 180px;">
<tr><td align="center">top: 100px；left: 600px;</td></tr>
<tr><td align="center">222</td></tr>
<tr><td align="center">333</td></tr>
</table>
</div> <div id="btnDiv">
<input type="button" value="缩小" onclick="small()" />
<input type="button" value="放大" onclick="big()" />
</div>



  </body>
</html>郁闷的是，后来发现在FF没问题，IE下始终有段height，很不爽，望高手帮下忙，怎么才有FF的效果

解决方案 »

  1.   

    有段测试代码应该是这样
    if(parseInt(newDiv.style.height) < 30){
    alert(parseInt(newDiv.style.width) + "\t" + parseInt(newDiv.style.height));
    }
      

  2.   

    #btnDiv{
    position: absolute;
    top: 400px;
    left: 600px;
    overflow:hidden;
    }#main{
    position: absolute;
    top: 100px;
    left: 600px;
    overflow:hidden;
    }这样试试
      

  3.   

    我知道怎么回事了   就如你所说   溢出高度隐藏就能解决问题http://bbs.blueidea.com/thread-2740031-1-1.html
    原来在IE下DIV有个最小高度，是12px，就算设置5px，也会显示12px，不知道微软为啥要这样，奇怪...