通过 CSS 隐藏的 IE7 表格单元格不能通过后续的类更改变得可见 (??)

Question

这是两个测试文件：

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

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

这两个页面上的标记几乎都是相同的。有一个有两列的表。一列（第二列）的 和 元素都被赋予类“junk”。

在“良好”页面中，当您加载它时，您会在顶部看到一个未选中的复选框。如果选中该复选框，第二列就会消失。如果取消选中它，则会返回第二列。在“坏”页面中，复选框开始处于选中状态。取消选中它在 IE7 中没有任何效果，但它可以在其他没有被根本邪恶所控制的浏览器中工作。

该复选框与一个小的 Javascript 例程挂钩，该例程仅在 标记中添加或删除“compact”类。有一个样式表包含以下内容：

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

因此，应该发生的事情就是“好”页面上发生的事情。然而，在 IE7（也可能是 6）中，如果表格元素开始使得当最初渲染时它们被设置为不可见，则它们将永远不会被看到，无论 DOM 的后续更改如何，都会使新的样式规则生效并使其可见。 （这似乎是 部分的问题；我在其他元素上使用相同的机制，并且它们都工作正常。）

所以，问题是：有人知道吗一些黑客——无论多么令人反感——可以用来绕过这种愚蠢的行为？显然，我可以尝试安排 IE7 使用相关的切换控件集启动其视图，以便表格单元格可见，但在我的情况下，这种情况发生在作为 AJAX 响应生成的表格周围，因此这将是一个很大的问题我宁愿避免混乱。 （该表格实际上也是一个表格；它是表格信息的显示，而不是布局黑客。）

我用谷歌搜索了一下，没有找到任何东西，如果你考虑一下你从“IE7”获得了多少点击，这就不奇怪了。布局错误”搜索。

Answer 1

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

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

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

Answer 2

这是一个渲染错误。 IE6/7 不使用正确的表格显示模型。不幸的是，我记不起这个特定错误的具体名称/标签，而且我似乎找不到权威资源来证实这一点。

至少，我找到了 2 个 CSS 方法来解决这个问题。

1. 最简单的方法是使用 visibility:hidden; 而不是 display:none;。不幸的是，如果您在要切换的列之后有更多列或有表格边框，则此方法效果不佳。它仍然留有空间。将 position:absolute; 添加到 .junk 可以修复 FF 中的此问题，但在 IE 中又会遇到相同的渲染问题。

2. 滥用 IE 的错误能力来应用 样式的黑客行为。

   ;
   
       <头>
           <脚本 src="http://code.jquery.com/jquery-latest.min.js">
           <脚本>
               $(函数() {
                   $('#click').click(function() {
                       $('table').toggleClass('compact', this.checked);
                   });
               });
           
           <风格>
               table.compact.junk { 显示：无； }
           
           
       
       <正文>
           <输入类型=“复选框”id=“点击”选中>
           <表类=“紧凑”>
               >
               
               
                   你好
                   世界
               
               
                   Foo
                   酒吧
               
               
                   Foo
                   酒吧
               
           
       
   
   

---

或者，您也可以只切换 jQuery 中实际 感兴趣的元素：

$(function() {
    $('#click').click(function() {
        $('table.compact .junk').toggle(!this.checked);
    });
});