可见性:隐藏似乎在IE，Chrome或Safari下不起作用 - visibility:hidden doesn't seem to work under IE, Chrome or safari

visibility:hidden doesn't seem to work under IE, Chrome or safari

总结，要求：如果存在数据，则用文本填充div如果不存在数据，则隐藏div 但保留整个表格垂直高度

实现：

.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";
}

这在FF中完美运行但是在Chrome中，IE和Safaridiv元素没有隐藏。

可以使用

visibility：collapse，但随后整体表格垂直大小减小，并且下面元素的位置不正确。

我未能找到任何解决方案来解决这个看似简单的要求。有人可以提出任何建议吗？

问题是隐藏行没有内容，因此浏览器为其分配的垂直空间量比包含文本的行少。它与可见性无关，因为当行可见时也会发生同样的事情。

当您将其更改为 visibility: hidden; 时，请确保它仍然包含内容。如果需要占位符，请将其放入 。

document.getElementById('button').onclick = function() {
  document.getElementById("div_car_close_out").innerHTML = '&nbsp;';
  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>

Chrome、Firefox、IE、Opera 和 Safari 都支持可见性属性的可见值。

但是您可以使用visibilitY:initial，但IE不支持它。

您可以查阅开发人员 Mozilla 参考，了解有关此属性及其可能值的详细信息。