Question

我试图在页面中隐藏/取消隐藏某些表格单元格，并且我发现在Internet Explorer中隐藏和取消隐藏之前和之后单元格大小相同，但在Firefox和Chrome中，包含我的标签的单元格会改变大小

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

我也尝试过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>

Answer 1

不要假设“inline”是display属性的默认值。事实并非如此。所以，如果你想删除你的“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++;
        }
}

Answer 2

我还注意到使用inline和block会搞乱Firefox中的大小，但不会在IE中在我的情况下，我试图通过将样式应用于TR元素来隐藏整行。虽然它会隐藏它，但是在不隐藏它时它会被压扁。

发现我需要使用：

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

insted of

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

或

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

它然后保持列大小正确，我猜这意味着如果你隐藏表格单元格然后你应该使用

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

因此单元格的大小正确完成，显然通过将其设置为其他两个选项之一，Firefox和Chrome将不再将其视为表格的一部分，而是将其视为单独的项目恰好位于那里，允许我们在表中包含不属于表的元素。但IE无法处理，表中的元素必须是表的一部分，因此它将其重新附加到表中。我不确定这种“功能”会派上用场而不仅仅是令人困惑的情况。但这似乎正在发生。

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

2 个答案: