可见性的替代方案：折叠不适用于 IE 和 Chrome

Posted 2023-02-21

技术标签:

【中文标题】可见性的替代方案：折叠不适用于 IE 和 Chrome【英文标题】：Alternative to visibility:collapse not working on IE and Chrome 【发布时间】：2011-01-30 00:57:42 【问题描述】：

以下页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<STYLE type="text/css"> 
tr.cccc 
visibility: collapse;

</STYLE>
<BODY>
<TABLE border="1">
<TR class="cccc">
<TD>one</TD>
</TR>
</TABLE>
</BODY>
</HTML>

仅适用于 Firefox。 IE 始终显示该行，Chrome 隐藏该行但显示其垂直空间。那么，如何仅使用 CSS 完全隐藏一行？

【问题讨论】：

你试过“display: none;”吗？它似乎有效！非常感谢！有点晚了，但你可以让它在 Chrome 上运行 this way 【参考方案1】：

使用显示：无

而不是 可见性：折叠

在 IE6 和 Google Chrome 中隐藏道场树网格摘要行对我有用

【讨论】：

不幸的是，display: none; 还会导致行和单元格被忽略，以便在至少一些浏览器中计算 rowspan 和 colspan，从而导致带有 rowspan 和 colspan 的表格布局完全不稳定。跨度> 将可见性设置为可见会使其出现吗？或者我也必须摆脱显示的东西。可见性：可见对我有用【参考方案2】：

visibility: collapse

在 IE8 中实现

http://msdn.microsoft.com/en-us/library/ms531180%28VS.85%29.aspx

【讨论】：

【参考方案3】：

visibility: collapse 在 IE 中不起作用。 Source 似乎您需要使用 hidden 代替 IE。有关详细信息，请参阅链接页面。

但是，规范明确指出，在列的情况下，只有折叠是有效值。仅 Firefox 支持折叠。由于资源管理器 Windows 无论如何都支持列上的所有样式声明，因此它还支持可见性：隐藏。

另外，给构造一个完整的 HTML 结构也没有什么坏处：

<!DOCTYPE html PUBLIC 
 "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<STYLE type="text/css"> 
 ....
</STYLE>
</HEAD>
...

【讨论】：

我已经知道可见性属性的隐藏值。隐藏不是解决我问题的正确方法。我希望该行完全消失：也就是说，它没有显示空白。 Hidden 隐藏数据，但保留垂直空间。 Collapse 隐藏数据并删除行占用的空间，就好像它根本不存在一样。【参考方案4】：

它已经过时了，但是您可以使用 innerHTML 来重写您想要“消失”的部分。

【讨论】：

【参考方案5】：

看来visibility: collapse 也可以在IE 中使用。我正在使用它，它可以在 IE 和 Firefox 中运行。不知道除了这两个之外的其他浏览器。

我做了以下事情：

HTML：

<table class="intValidationTable">

<tr class="rangeTR" style="visibility: collapse;">

<tr class="listTR" style="visibility: collapse;">

javascript + Jquery：