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=utf-8" />
<title>无标题文档</title>
</head><body>
<table   border="1"> 
    <tr   id="row1"> <td> 1111111111 </td> </tr> 
</table> 
<input   type="button"   onclick="hide()" value="测   试"/> 
<script> 
function   hide()   { 
if(navigator.userAgent.indexOf("MSIE")>0)//判断浏览器类型
 {
    if   (document.getElementById("row1").style.display=="block")   { 
        //alert("hidden"); 
        document.getElementById("row1").style.display="none"; 
    }   
else   
{ 
        document.getElementById("row1").style.display="block"; 
    } 
 }
 else
  {
if   (document.getElementById("row1").style.display=="table-row")   { 
        //alert("hidden"); 
        document.getElementById("row1").style.display="none"; 
    }   
else   
{ 
        document.getElementById("row1").style.display="table-row"; 
    } 
  }
} 
</script>
</body>
</html>

解决方案 »

  1.   

    补充一下, 因为控制的是表格的行, 在FF中的display属性需要使用table-row;但是IE中不支持, 所以需要一个HACK判断, 以完成两个浏览器下的显示效果,主要是IE和FF对WEB标准支持的程度
      

  2.   

    少写了一句:<!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>
    </head><body>
    <table   border="1"> 
        <tr   id="row1"> <td> 1111111111 </td> </tr> 
    </table> 
    <input   type="button"   onclick="hide()" value="测   试"/> 
    <script> 
    function   hide()   { 
    if(navigator.userAgent.indexOf("MSIE")>0)//判断浏览器类型
     {
     
        if   (document.getElementById("row1").style.display=="" || document.getElementById("row1").style.display=="block")   { 
            //alert("hidden"); 
            document.getElementById("row1").style.display="none"; 
        }   
    else   
    { 
            document.getElementById("row1").style.display="block"; 
        } 
     }
     else
      {
    if   (document.getElementById("row1").style.display=="" || document.getElementById("row1").style.display=="table-row")   { 
            //alert("hidden"); 
            document.getElementById("row1").style.display="none"; 
        }   
    else   
    { 
            document.getElementById("row1").style.display="table-row"; 
        } 
      }
    } 
    </script>
    </body>
    </html>
      

  3.   

    加个CSS吧 把宽度固定就OK了