Скрыть / показать изменения размера ячейки в Firefox - PullRequest
Новая
       3

Скрыть / показать изменения размера ячейки в Firefox

0 голосов
/ 16 мая 2011

Я пытаюсь скрыть / показать некоторые ячейки таблицы на странице и обнаружил, что ячейки имеют одинаковый размер до и после скрытия и отображения в Internet Explorer, но как в Firefox, так и в Chrome ячейки, содержащие мои метки, изменяют размер .

Моя страница на самом деле более сложная, чем следующий код, но я создал эту урезанную версию, чтобы попытаться изолировать проблему, поскольку она показывает проблему без дополнительных осложнений.

Я также попробовал оба style = "display: block;" and 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>

Ответы [ 2 ]

1 голос
/ 16 мая 2011

Не предполагайте, что "inline" является значением по умолчанию свойства display. Это не так. Так что если вы хотите удалить свой «дисплей: нет;» override, просто установите свойство display обратно на то, что было раньше, и это ничто. 

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++;
        }
}
0 голосов
/ 06 сентября 2013

Я также заметил, что использование inline и block приведет к путанице размеров в Firefox, но не в IE. В моем случае я пытался скрыть целую строку, применяя стиль к элементу TR.и хотя он будет просто скрывать его, он будет скрыт, когда все будет скрыто.

обнаружил, что мне нужно использовать: 

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

вместо 

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

или 

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

тогда он правильно сохранил размеры столбцов, я предполагаю, что это означает, что если вы прячете ячейку таблицы, вам следует использовать 

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

, чтобы размер ячейки был установленправильно, очевидно, установив для него один из двух других параметров, Firefox и Chrome больше не будут обрабатывать его как часть таблицы, в которой он находится, а обрабатывают его так, как если бы это был отдельный элемент, который просто находится там, что позволяет намэлементы в таблице, которые не являются частью таблицы.Но IE не может справиться с этим, элементы в таблице должны быть частью таблицы, поэтому он присоединяет ее к таблице.Я не уверен в ситуации, когда эта «особенность» будет полезной, а не просто запутанной.но, похоже, именно это и происходит.

...