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

Question

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?

Answer 1

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.