可见性：隐藏似乎不适用于IE，Chrome或Safari

In summary, Requirement: If data present populate div with text If not data present hide div but retain overall table vertical height

Implementation:

html:

<tr>
  <td>
    <div id= 'div_car_close_out' class='car_close_out'></div>
  </td>
</tr>

css:

div.car_close_out {
  border: 2px inset #D5D0D0;
  text-align: left ;
  overflow-y:scroll;
  height:35px;
  background-color: white;
}

javascript:

if (arr_task[0].CarClosedOutDate == " ") {
  document.getElementById("div_car_close_out").style="visibility:hidden";
} else {
  document.getElementById("div_car_close_out").innerHTML = arr_task[0].CarCloseOut;
  document.getElementById("div_car_close_out").style="visibility:visible";
}

This works perfectly in FF However in Chrome, IE and Safari div element is not hidden.

It is possible to use visibility:collapse, but then overall table vertical size is reduced, and positioning of elements below is not correct.

I've failed to find any solution to this seemingly simple requirement. Can any make any suggestions?

The visible value of visibility property is supported for Chrome, Firefox, IE, Opera and Safari.

However you can use visibilitY:initial, but it's no supported by IE.

You can consult the Developer Mozilla Reference for detailed information about this property and his possibles values.

The problem is that the hidden row has no contents, so the browser assigns a smaller amount of vertical space to it than the rows with text in them. It has nothing to do with the visibility, since the same thing happens when the row is visible.

When you change it to visibility: hidden;, make sure it still has contents. Put   in it if you need a placeholder.

document.getElementById('button').onclick = function() {
  document.getElementById("div_car_close_out").innerHTML = ' ';
  document.getElementById("div_car_close_out").style = "visibility:hidden";
};

<table>
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>
      <div id='div_car_close_out' class='car_close_out'>Row 2</div>
    </td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>
<button id="button">
  Hide row 2
</button>

</div>