HTML隐藏的td在IE6中占用空白

Posted 2023-03-06

【中文标题】HTML隐藏的td在IE6中占用空白

【英文标题】：HTML hidden td takes white space in IE6

【发布时间】：2016-10-22 12:03:29

【问题描述】：

我正在开发一个 javascript 脚本，它将在我的 button 点击时隐藏和显示 td。

当我试图隐藏 td 而不是 IE6 时，隐藏 td 并在其中放置一些空格，但是我的代码正在所有最新的现代浏览器上运行，甚至是 latest IE。

我的代码：

data = getElementsByClassName("data", "td", myElement);
for (i = 0; i < data.length; i++) 
    td = data[i];                        
    tr = td.parentNode;
    for (j = 0; j < tr.childNodes.length; j++)         
        tr.childNodes[j].style.display = "none";
    

在这里我写了我自己的getElementsByClassName 方法，因为IE6 不支持它，我想要IE6 支持。上面的代码在除IE6 浏览器之外的所有其他浏览器中都能找到。

在 IE6 中，我的表格如下所示：

在其他浏览器中

感谢您的帮助。

【问题讨论】：

你能把你的代码放在小提琴里吗？

我已经把主要的code block 放到这个问题上了？顺便说一句，你有 IE6 吗？

您是否尝试过使用Element.nodeType？ html 换行符也会创建一个空格。

@phpglue，不，我不尝试。连我都不知道Element.nodeType 谢谢让我试试看。

我试过了。如果您在 HTML 元素之间放置一个空格或换行符，则会创建一个空格。试试这个<span>wow</span> 现在在你的编辑器中换行，然后输入<span>WTF</span>。现在尝试像这样<span>wow</span><span>WTF</span> 并注意缺少空白。

【参考方案1】：

尝试折叠它们：

tr.childNodes[j].style.visibility = "collapse";
tr.childNodes[j].style.display = "none";

如果你还设置了 display-property 也不会有什么坏处。

---

如果您以后想重新激活单元格，可以将其反转：

tr.childNodes[j].style.visibility = "visible";
tr.childNodes[j].style.display = "table-cell";

---

如果由于任何原因这不起作用， 我们应该找出为什么仍然存在差距。 能否使用 IE-Inspector/Dev-Tools (F12) 找出差距从何而来？

我可以想象填充/边距/边框属性是这里的问题， 或者说这是传说中的hasLayout-issue的问题。

【讨论】：

谢谢，我也可以输入tr.childNodes[j].style.display = "none"; 吗？

不会有什么坏处，但出于研究目的，您可以先尝试一下，然后让我/我们知道它是否有效 :)

好的，当我想在屏幕上显示它们时我必须做什么？

对不起，它看起来像IE6 不支持visibility = "collapse"，我在IE6 上收到以下错误：Could not get the visibility property, Invalid argument.

顺便说一下IE6 也不支持显示的table-cell 参数。

【参考方案2】：

IE6 获取文本节点和注释节点。也许你应该试试这个：

var doc = document;
function getElementsByClassName(className)
  if(doc.getElementsByClassName)
    return doc.getElementsByClassName(className);
  
  var r = [], all = doc.getElementsByTagName('*');
  for(var i=0,l=all.length; i<l; i++)
    var ai = all[i];
    if(ai.className === className)
      r.push(ai);
    
  
  return r;


var data = getElementsByClassName('data');
for(var i=0,l=data.length; i<l; i++)
  var kids = data[i].parentNode.childNodes;
  for(var n=0,q=kids.length; n<q; n++)
    var kid = kids[n];
    if(kid.nodeType !== 1)
      kid.style.display = 'none';
    
  

【讨论】：

谢谢，但还是不行。它给出了相同的输出。