document.getElementById("mydiv").innerHTML="";在IE里面仍然要占位，我要FF的效果。

<!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=gb2312" />
<title>div增加内容后，删除内容，怎么IE里面还有原来的位置</title><br />
<style type="text/css">
div{
background-color:#FF0000;
}
</style>
<script type="text/javascript" language="javascript">
function changeDivA(){
document.getElementById("mydiv").innerHTML="加点内容......";
}
function changeDivB(){
document.getElementById("mydiv").innerHTML="";
if(document.all){
var obj = document.getElementById("mydiv");
obj.outerHTML = obj.outerHTML;
}
}
</script>
</head><body>
<div id="mydiv"></div>
<form id="form1" name="form1" method="post" action="">
<input type="button" name="button" value="按钮a" onclick="javascript:changeDivA();" />
<input type="button" name="button" value="按钮b" onclick="javascript:changeDivB();" />
</form>
</body>
</html>

解决方案 »

  1.   

    <!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=gb2312" />
    <title>div增加内容后，删除内容，怎么IE里面还有原来的位置</title><br />
    <style type="text/css">
    div{
    background-color:#FF0000;
    }
    </style>
    <script type="text/javascript" language="javascript">
    function changeDivA(){
    document.getElementById("mydiv").style.display="";
    document.getElementById("mydiv").innerHTML="加点内容......";
    }
    function changeDivB(){
    document.getElementById("mydiv").style.display="none";
    }
    </script>
    </head><body>
    <div id="mydiv"></div>
    <form id="form1" name="form1" method="post" action="">
    <input type="button" name="button" value="按钮a" onclick="javascript:changeDivA();" />
    <input type="button" name="button" value="按钮b" onclick="javascript:changeDivB();" />
    </form>
    </body>
    </html>
      

  2.   

    楼上的大哥，我不是要div不可见（display="none"），而是希望div里面没有内容后，其高度自动变为0。
      

  3.   

    wo kan kan 是不是这种效果
      

  4.   

    <!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=gb2312" />
    <title>div增加内容后，删除内容，怎么IE里面还有原来的位置</title><br />
    <style type="text/css">
    div{
    background-color:#FF0000;
    }
    </style>
    <script type="text/javascript" language="javascript">
    function changeDivA(){
    document.getElementById("mydiv").innerHTML="加点内容......";
    }
    function changeDivB(){
    document.getElementById("mydiv").innerHTML="";
    document.getElementById("mydiv").style.width=0;
    document.getElementById("mydiv").style.height=0;
    }
    </script>
    </head><body>
    <div id="mydiv"></div>
    <form id="form1" name="form1" method="post" action="">
    <input type="button" name="button" value="按钮a" onclick="javascript:changeDivA();" />
    <input type="button" name="button" value="按钮b" onclick="javascript:changeDivB();" />
    </form>
    </body>
    </html>
      

  5.   

    dispaly:none不好　隐藏了有些操作就不起作用了
    还是用visible:hidden吧
      

  6.   

    0-0 ~
    visibility="hidden"
    不过　div还是要占位置的
      

  7.   

    <!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>div</title><br />
    <style type="text/css">
    div{
    background-color:#FF0000;
    }
    </style>
    <script type="text/javascript" language="javascript">
    function changeDivA()
    {
      document.getElementById("mydiv").style.height="auto";
      document.getElementById("mydiv").innerHTML="加点内容......";
    }
    function changeDivB()
    {
      document.getElementById("mydiv").innerHTML="";
      document.getElementById("mydiv").style.height="0";
    }
    </script>
    </head><body>
    ------<div id="mydiv" style="line-height:normal"></div>------
    <form id="form1" name="form1" method="post" action="">
    <input type="button" name="button" value="按钮a" onclick="javascript:changeDivA();" />
    <input type="button" name="button" value="按钮b" onclick="javascript:changeDivB();" />
    </form>
    </body>
    </html>
      

  8.   

    从CSS上解决吧, IE的CSS 有N多莫名其妙的问题...7.0以下....
      

  9.   

    用DOM即可。
    <!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=gb2312" />
    <title>div增加内容后，删除内容，怎么IE里面还有原来的位置</title><br />
    <style type="text/css">
    div{
    background-color:#FF0000;
    }
    </style>
    <script type="text/javascript" language="javascript">
    function changeDivA(){
    document.getElementById("mydiv").appendChild(document.createTextNode("加点内容......"));
    }
    function changeDivB(){
    document.getElementById("mydiv").removeChild(document.getElementById("mydiv").childNodes[0]);
    }
    </script>
    </head><body>
    <div id="mydiv"></div>
    <form id="form1" name="form1" method="post" action="">
    <input type="button" name="button" value="按钮a" onclick="javascript:changeDivA();" />
    <input type="button" name="button" value="按钮b" onclick="javascript:changeDivB();" />
    </form>
    </body>
    </html>
      

  10.   

    多谢众多高手出手。meizz(梅花雪)老大的不行哦！~!~只能采用muxrwc(十月，期待) 的方法了。
      

  11.   

    我的代码在IE7和FF里是可行的！
      

  12.   

    function changeDivB()
    {
      document.getElementById("mydiv").innerHTML="";
      document.getElementById("mydiv").style.height="0";
      document.getElementById("mydiv").style.overflow="hidden";
    }
    设置overflow IE6就也可以了:D