在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中隱藏/取消隱藏更改單元格大小

回答

相關問題