Html 可见性的替代方法：折叠不适用于 IE 和 Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2487187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternative to visibility:collapse not working on IE and Chrome
提问by tic
The following page:
以下页面：
<!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>
works only in Firefox. IE always displays the row, and Chrome hides the row but showing its vertical space. So, how can I hide completely a row using only CSS?
仅适用于 Firefox。IE 始终显示该行，Chrome 隐藏该行但显示其垂直空间。那么，如何仅使用 CSS 完全隐藏一行？
回答by Senthil
Use
display: none
使用
显示：无
instead of visibility: collapse
而不是 可见性：崩溃
It works for me to hide the dojo tree grid summary row in IE6 & Google Chrome
在 IE6 和 Google Chrome 中隐藏 dojo 树网格摘要行对我有用
回答by Leo
visibility: collapse
was implemented in IE8
在 IE8 中实现
http://msdn.microsoft.com/en-us/library/ms531180%28VS.85%29.aspx
http://msdn.microsoft.com/en-us/library/ms531180%28VS.85%29.aspx
回答by Pekka
visibility: collapsedoes not work in IE. Sourceseems you will need to use hiddeninstead for IE. See the linked page for details.
visibility: collapse在 IE 中不起作用。来源似乎您需要hidden为 IE使用。有关详细信息，请参阅链接页面。
However, the specification clearly states that in the case of columns, only collapse is a valid value. collapse is supported only by Firefox. Since Explorer Windows supports all style declarations on columns anyway, it also supports visibility: hidden.
但是，规范明确指出，在列的情况下，只有collapse 是有效值。只有 Firefox 支持折叠。由于资源管理器 Windows 无论如何都支持列上的所有样式声明，因此它还支持可见性：隐藏。
Also, it doesn't hurt to give the construct a complete HTML structure:
此外，为构造提供完整的 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>
...
回答by Frances Advincula
It is outdated, but you could use innerHTML to rewrite the parts that you want to be "gone."
它已经过时了，但您可以使用 innerHTML 来重写您想要“消失”的部分。
回答by DarkKnightFan
Well it seems visibility: collapsecan be used in IE as well. I am using it and it is working in both IE and Firefox. Dont know about other browsers apart from these two.
那么它似乎visibility: collapse也可以在 IE 中使用。我正在使用它，它在 IE 和 Firefox 中都可以使用。除了这两个之外，不知道其他浏览器。
I have done the following:
我做了以下工作：
HTML:
HTML：
<table class="intValidationTable">
<table class="intValidationTable">
<tr class="rangeTR" style="visibility: collapse;">
<tr class="rangeTR" style="visibility: collapse;">
<tr class="listTR" style="visibility: collapse;">
<tr class="listTR" style="visibility: collapse;">
Javascript + Jquery:
Javascript + 查询：
var rows = $('table.intValidationTable tr');
var rows = $('table.intValidationTable tr');
var rangeTR = rows.filter('.rangeTR');
var rangeTR = rows.filter('.rangeTR');
var listTR = rows.filter('.listTR');
var listTR = rows.filter('.listTR');
rangeTR.css("visibility", "visible");
rangeTR.css("visibility", "visible");
listTR.css("visibility", "collapse");
listTR.css("visibility", "collapse");
This should work!
这应该有效！
回答by Jared
visibility: collapse; in a tr and td for me is just hiding the data but still taking up vertical space in Safari in 2020. Works fine in chrome (row and column widths still ok but vertical space is gone)
能见度：崩溃；在 tr 和 td 中对我来说只是隐藏数据，但在 2020 年仍然占用 Safari 中的垂直空间。在 chrome 中工作正常（行和列宽度仍然可以，但垂直空间消失了）
