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

【问题标题】：HTML hidden td takes white space in IE6HTML隐藏的td在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 元素之间放置一个空格或换行符，则会创建一个空格。试试这个wow 现在在你的编辑器中换行，然后输入WTF。现在尝试像这样wowWTF 并注意缺少空白。

标签： javascript html css internet-explorer-6

【解决方案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';
    }
  }
}

【讨论】：

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