CSS无法看到的IE7表格单元格无法通过以后的类更改显示(??)

Question

这是两个测试文件:

http://gutfullofbeer.net/good-table.html

http://gutfullofbeer.net/bad-table.html

这两页上的标记几乎都是一样的.有一个有两列的表.的<th>和<td>一列(第二个)的元素都给出的类"垃圾".

在"好"页面中,当您加载它时,您会在顶部看到未选中的复选框.如果选中该复选框,则第二列应消失.如果取消选中它,第二列将返回.在"错误"页面中,复选框开始检查.取消选中它在IE7中没有任何效果,尽管它适用于其他不受基本邪恶影响的浏览器.

该复选框挂钩到一个小的Javascript例程,只是添加或删除<table>标签中的"compact"类.有一个样式表,包括:

table.compact th.junk, table.compact td.junk {
  display: none;
}

因此,应该发生的是"好"页面上发生的事情.然而,似乎在IE7中(也可能是6个)如果表元素开始这样,当最初呈现时它们被设置为不可见,它们将永远不会被看到,无论后来对DOM的更改会带来新的样式规则生效并让它们可见.(这似乎是<table>部分问题;我在其他地方使用相同的机制,它们都运行正常.)

因此,问题是:是否有人知道某些黑客 - 无论多么令人反感 - 可以用来绕过这种愚蠢行为？显然我可以尝试安排IE7使用相关的切换控件集来启动它的视图,以便表格单元格可见,但在我的情况下,这发生在一个作为AJAX响应产生的表周围,所以它会很大我宁愿避免.(该表也是一个表;它是表格信息的显示,而不是布局黑客.)

我已经google了一下,没有找到任何东西,如果你考虑从"IE7布局错误"搜索得到多少点击,这不应该是令人惊讶的.

Answer 1

我没有安装 IE 7，但 IE 6 也有同样的问题。以下是我修复该问题的方法：

$(function() {
  $('#click').click(function() {
    $(".compact th+th,.compact td+td").toggleClass('junk',this.checked);
  });
});

问题出在你的选择器上。切换到compact不会增加 的可见性junk。