Javascript 可视性：隐藏不'；t似乎在IE、Chrome或safari下工作

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

实施：

html:

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

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

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

javascript:

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

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

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元素并没有隐藏

可以使用可见性：折叠，但随后整个表的垂直大小减小，并且下面元素的位置不正确

---

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

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

但是，您可以使用

可见性：initial

，但IE不支持它

---

有关此属性及其可能值的详细信息，请参阅。

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

将其更改为

可见性：隐藏时，确保它仍然有内容。如果需要占位符，请将
放入其中


document.getElementById（'button'）。onclick=function（）{
document.getElementById（“div\u car\u close\u out”）.innerHTML=''；
document.getElementById（“div\u car\u close\u out”）.style=“可见性：隐藏”；
};

一排
第2排
第3排
隐藏第2行
您是否尝试过不透明度：0？您总是在最后一行将其设置为可见。它不是条件流的一部分。我建议在IFs中添加大括号。请查看上面提供的HTML。您没有关闭有问题的div标记，其中也没有任何内容。您的JavaScript很好，可以在Chrome中运行。