可见性：隐藏在 IE、Chrome 或 safari 下似乎不起作用答案

【问题标题】：visibility:hidden doesn't seem to work under IE, Chrome or safari可见性：隐藏在 IE、Chrome 或 safari 下似乎不起作用
【发布时间】：2016-07-06 20:33:27
【问题描述】：

总之，要求：如果存在数据，则用文本填充 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 和 Safari 的 div 元素并没有被隐藏。

可以使用visibility:collapse，但是整个表格的垂直尺寸会减小，下面的元素定位不正确。

对于这个看似简单的要求，我没有找到任何解决方案。大家有什么建议吗？

【问题讨论】：

你试过不透明度：0； ?
您将其设置在最后一行，始终可见。它不是您的条件流程的一部分。我建议在你的 IF 中添加大括号。
请查看您在上面提供的 HTML。您没有关闭有问题的 div 标签，其中也没有任何内容。您的 JavaScript 很好，可以在 Chrome 中运行。

标签： javascript php html css ajax

【解决方案1】：

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

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

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>

【讨论】：

【解决方案2】：

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

不过你可以使用visibilitY:initial，但是IE不支持。

您可以咨询Developer Mozilla Reference，了解有关此属性及其可能值的详细信息。

【讨论】：