旧 IE 没有动态更新 CSS

Question

我有一个带有一些 css 的表格来隐藏/显示列。每个 td 都有“column”和“columnX”类，其中 X 是列号。 CSS看起来像：

.column { display: none; }
table.show1 .column1 { display: block; }
table.show2 .column2 { display: block; }

表格一开始是隐藏的，用户打开它们。发生这种情况时，会根据所显示的列向表中添加一个类，如“show1”或“show2”。

这在 FF、chrome 和 IE8 中运行良好。但是 IE6/7 有一个问题，即“列”不会变成“显示：块”。但是，如果我进入开发人员工具栏并切换 css 规则

table.showX .columnX {display: block; }

它工作正常。就像这些旧浏览器在通过 javascript 完成时不知道更新表格一样。另外，如果我在表中添加一个类似“show0”的类（不是在 javascript 中），它在 IE6/7 中可以正常工作。

有任何已知的解决方法吗？

Answer 1

嗯，首先，表格单元格的正确显示值是不是“块”；它是“表格单元格”。现在，无论如何，这对于旧版本的 IE 来说是一个有争议的问题，因为他们并不真正理解那种花哨的东西。

现在的下一个问题是旧的 IE（6 和 7，而不是 8）在最初呈现表格单元格时具有这个有趣的特性：如果在 首先 呈现表格时，有一列<td>（以及顶部的 <th>，如果您愿意）元素是不可见的，然后对 DOM 的后续更改将永远使其显示。那样很愚蠢；事实上I've asked the same question here。

我为解决这个问题所做的是将一些 JavaScript 拖放到页面上，以便在 HTML 首次呈现之后，一些代码可以返回，然后使相应的列不可见。只要它们一开始是可见的，它们就可以在之后关闭并重新打开而不会发生任何事故。