在Firefox中隐藏/取消隐藏更改单元格大小

我想隐藏/取消隐藏某个表格单元或页面，并且我发现隐藏和取消隐藏在Internet Explorer中之前和之后的单元格大小相同，但在Firefox和Chrome中，包含我的标签的单元格更改大小。在Firefox中隐藏/取消隐藏更改单元格大小

我的页面实际上比下面的代码更复杂，但我创建了这个精简版本来尝试和隔离问题，asi它显示了问题而没有其他复杂性。

我也试过style =“display：block;”和style =“display：inline;”取消隐藏元素。

任何人都可以帮助我理解为什么Firefox和Chrome改变了大小？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title> New Document </title> 
    <meta name="Generator" content="EditPlus"> 
    <meta name="Author" content=""> 
    <meta name="Keywords" content=""> 
    <meta name="Description" content=""> 
<script type="text/javascript"> 

function hide_them(){ 
    TD_hide_them(); 
} 
function TD_hide_them(){ 
     // hide the TD 
     count=0; 
     while(document.getElementById("TD_"+count)){ 
      document.getElementById("TD_"+count).style.display="none"; 
      count++; 
     } 
     // hide the Input 
     count=0; 
     while(document.getElementById("Input_"+count)){ 
      document.getElementById("Input_"+count).style.display="none"; 
      count++; 
     } 
} 

function unhide_them(){ 
    TD_unhide_them(); 
} 
function TD_unhide_them(){ 
     // hide the TD 
     count=0; 
     while(document.getElementById("TD_"+count)){ 
      document.getElementById("TD_"+count).style.display="inline"; 
      count++; 
     } 
     // hide the Input 
     count=0; 
     while(document.getElementById("Input_"+count)){ 
      document.getElementById("Input_"+count).style.display="inline"; 
      count++; 
     } 
} 
</script> 


<style type="text/css"> 
TD.MYLabel { 
    background-color: #99D6EB; 
    vertical-align: top; 
    text-align:left; 
    width: 100px; 
} 

</style> 
</head> 

<body> 
    <p> 
    <table style="width:600px; background-color: yellow;"> 
    <tr> 
    <td id="TD_0" class="MYLabel">Label 0</td><td><input type="text" id="Input_0"></td> 
    </tr> 
    <tr> 
    <td id="TD_1" class="MYLabel">Label 1 is longer</td><td><input type="text"  id="Input_1"></td> 
    </tr> 
    </table> 
    <input type="button" onclick="hide_them()" value="hide_them"> 
    <input type="button" onclick="unhide_them()" value="unhide_them"> 
    </p> 
</body> 
</html>

来源

2011-05-15 user754809

不要假定“内联”是显示属性的默认值。事实并非如此。所以如果你想删除你的“display：none;”覆盖，只需将显示属性恢复到之前的状态，这不算什么。

function TD_unhide_them(){ 
     // hide the TD 
     count=0; 
     while(document.getElementById("TD_"+count)){ 
      document.getElementById("TD_"+count).style.display=""; 
      count++; 
     } 
     // hide the Input 
     count=0; 
     while(document.getElementById("Input_"+count)){ 
      document.getElementById("Input_"+count).style.display=""; 
      count++; 
     } 
}

来源

2011-05-15 21:35:36 Neil

谢谢。完善。这解决了我的问题。根据w3schools.com内联是默认财产，我一直在这个假设。显然，他们对默认值是错误的。非常感谢您的帮助。非常感谢。 – user754809 2011-05-15 21:47:37

如果没有应用其他样式，'inline'是默认值。 UA样式表在所有现代浏览器中将表格单元格样式设置为“display：table-cell”。 – 2011-05-16 14:58:18

我也注意到，使用内联和块会搞乱在Firefox的大小，而不是在IE 在我的情况，我想通过应用样式到TR元素隐藏整行。虽然它会隐藏它很好，当它隐藏时它全部被挤压。

发现我需要使用：

document.getElementById("theid").style.display="table-row";

insted的的

document.getElementById("theid").style.display="block";

或

document.getElementById("theid").style.display="inline";

它，然后不停的柱尺寸正常，我猜这意味着，如果你隐藏表格单元格，那么您应该使用

document.getElementById("theid").style.display="table-cell";

这样，单元格的大小就可以正常完成，显然通过将其设置为其他两个选项之一，Firefox和Chrome将不再将其视为它所在表格的一部分，而是将它看作是单独的项目只是碰巧定位在那里，允许我们在表中包含不属于表的元素。但IE无法处理，表中的元素必须是表的一部分，因此它将它重新附加到表中。我不确定这种“功能”是否便利，而不仅仅是混淆。但这似乎是发生了什么。

来源

2013-09-06 18:31:44

在Firefox中隐藏/取消隐藏更改单元格大小

回答

相关问题