以下是两个测试文件：
这两页上的标记几乎都是一样的。有一个有两列的表。一列（第二列）的<th>和<td>元素都被赋予“垃圾”类。
在“好”页面中，当您加载它时，您会在顶部看到未选中的复选框。如果选中该复选框，则第二列应消失。如果取消选中它，第二列将返回。在“错误”页面中，复选框开始检查。取消选中它对IE7没有任何影响，尽管它适用于其他不受基本邪恶影响的浏览器。
该复选框挂钩到一个小的Javascript例程，它只是添加或删除<table>标记中的“compact”类。有一个样式表包括：
table.compact th.junk, table.compact td.junk {
display: none;
}
因此应该发生的是“好”页面上发生的事情。然而，似乎在IE7中（也可能是6个）如果表格元素开始，那么当最初呈现时，它们被设计为不可见，它们将永远不会被看到无论DOM的后续更改如何，都会使新样式规则生效并使其可见。 （这似乎是<table>部分的一个问题;我在其他地方使用相同的机制，它们都运行良好。）
所以，问题是：是否有人知道某些黑客 - 无论多么令人反感 - 可以用来绕过这种愚蠢行为？显然我可以尝试安排IE7使用相关的切换控件集来启动它的视图，以便表格单元格可见，但在我的情况下，这发生在一个作为AJAX响应产生的表周围，所以它会很大我宁愿避免。 （该表实际上也是一个表;它是表格信息的显示，而不是布局黑客。）
我已经用Google搜索并且没有找到任何内容，如果您考虑从“IE7布局错误”搜索中获得多少匹配，这应该不会令人惊讶。
答案 0 :(得分：2)
我没有安装IE 7，但它与IE 6的问题相同。这就是我所做的修复它：
$(function() {
$('#click').click(function() {
$(".compact th+th,.compact td+td").toggleClass('junk',this.checked);
});
});
问题在于你的选择器。切换compact不会增加junk的可见性。
答案 1 :(得分：2)
这是一个渲染错误。 IE6 / 7不使用正确的表格显示模型。不幸的是，我不记得这个特定的bug的特定名称/标签，我似乎无法找到确认这一点的授权资源。
至少，我发现了两种CSS方法来解决这个问题。
最简单的方法是使用visibility: hidden;代替display: none;。不幸的是，如果在待切换列之后有更多列或具有表格边框，则这不能很好地工作。它仍留有空间。将position: absolute;添加到.junk会在FF中修复此问题，但您会回到IE中的相同渲染问题。
一个滥用IE错误的<col>样式应用能力的黑客。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$('#click').click(function() {
$('table').toggleClass('compact', this.checked);
});
});
</script>
<style>
table.compact .junk { display: none; }
</style>
<!--[if lte IE 7]>
<style>
table.compact .junk { display: block; }
table.compact col.junk { display: none; }
</style>
<![endif]-->
</head>
<body>
<input type="checkbox" id="click" checked>
<table class="compact">
<col />
<col class="junk" />
<tr>
<th>Hello</th>
<th class="junk">World</th>
</tr>
<tr>
<td>Foo</td>
<td class="junk">Bar</td>
</tr>
<tr>
<td>Foo</td>
<td class="junk">Bar</td>
</tr>
</table>
</body>
</html>
或者，您也可以在jQuery中切换实际感兴趣的元素：
$(function() {
$('#click').click(function() {
$('table.compact .junk').toggle(!this.checked);
});
});