Question

总之，需求：如果存在的数据用文本填充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，但是整个表的垂直大小会减少，并且下面元素的位置不正确。

我没有找到任何解决这个看似简单的要求的方法。可以提出任何建议吗？

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

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

2 个答案: