在IE9 +中TR元素.display = none |隐藏渲染

时间:2014-02-14 02:12:46

标签: javascript css internet-explorer

jsFiddle Demo

任何人都可以解释一下如何在IE8以及之前和之后的IE 9以及之后,一致吗?

根据您的浏览器,当您单击隐藏按钮,然后单击显示按钮时,您将得到不同的结果。

IE8及更早版本,正确隐藏和恢复行(或至少,正如我所希望的那样)。 IE9 +和Chrome,一旦隐藏了行,恢复它会将所有列转储到FIRST列中,并丢失它的格式。其余列则为空白。

兼容性视图在某些情况下有效,但如果可能,我宁愿不求助于CV。

任何提示?

CODE SAMPLE?

3 个答案:

答案 0 :(得分:1)

默认情况下,表行设置为display: table-row;,因此切换到内联将破坏格式。用表格行替换内联。

答案 1 :(得分:1)

你需要:

document.getElementById("tr2").style.display = "table-row";
document.getElementById("tr3").style.display = "table-row";

showButton()方法内,因为display的默认tr属性为table-row

<强> Updated Fiddle

答案 2 :(得分:1)

在展示代码中将inline更改为table-row

问题是宽度不会调整为任何其他显示类型的其他显示类型