CSS使其不可见的IE7表格单元格不能通过以后的类更改(??)使其可见. [英] IE7 table cells made invisible by CSS cannot be made visible by later class changes (??)
问题描述
这是两个测试文件:
http://gutfullofbeer.net/bad-table.html
这两个页面上的标记几乎相同.有一张有两列的表.一列(第二列)的<th>和<td>元素都被赋予了垃圾"类.
The markup on those two page is all almost the same. There's a table with two columns. The <th> and <td> elements of one column (the second one) are all given the class "junk".
在好"字样中页，当您加载它时，您会在顶部看到一个未选中的复选框.如果选中此复选框，第二列应消失.如果您取消选中它，第二列将返回.在坏"中，页面上，该复选框开始选中.取消选中它不会对IE7产生任何影响，尽管它可以在其他不受根本危害的浏览器中使用.
In the "good" page, when you load it you'll see a checkbox unchecked at the top. If you check the checkbox, the second column should disappear. If you uncheck it, the second column comes back. In the "bad" page, the checkbox starts out checked. Unchecking it has no effect in IE7, though it works in other browsers that are not possessed by fundamental evil.
该复选框连接到一个小的Javascript例程，该例程仅添加或删除类"compact"类.从<table>标记中.有一个包含以下内容的样式表:
The checkbox is hooked to a little Javascript routine that just adds or removes the class "compact" from the <table> tag. There's a stylesheet that includes this:
table.compact th.junk, table.compact td.junk {
display: none;
}
因此，应该发生的是好"消息上发生的事情.页.但是，似乎在IE7中(也许也是6)，如果表元素开始，这样，当最初呈现时，它们被设置为不可见的样式，它们将永远不会被看到，而不管随后对DOM进行的更改如何使新的样式规则生效并使它们可见. (尤其对于<table>部件，这似乎是一个问题；我在其他元素上使用了相同的机制，它们都可以正常工作.)
Thus what should happen is what happens on the "good" page. However, it appears that in IE7 (maybe 6 too) if table elements start out such that when initially rendered they're styled to be invisible, they'll never be seen, regardless of subsequent changes to the DOM that would bring new style rules into effect and leave them visible. (This appears be an issue with <table> parts in particular; I'm using the same mechanism elsewhere with other elements and they all work fine.)
因此，问题是:是否有人知道可以用来绕开这种愚蠢行为的某些骇客(无论多么令人反感)?显然，我可以尝试安排IE7使用相关的切换控件集开始其视图，以使表单元格可见，但是在我的情况下，这发生在作为AJAX响应生成的表周围，因此这会很大我宁愿避免混乱. (该表也实际上是一个表；它是表格信息的显示，而不是布局hack.)
So, the question is: does anybody know of some hack — however revolting — that can be used to get around this idiotic behavior? Obviously I could try and arrange for IE7 to start its views with the relevant toggle control set so that the table cells are visible, but in my case this happens around a table that's produced as an AJAX response, and so it'd be a big mess I'd rather avoid. (The table is really a table, too; it's a display of tabular information, not a layout hack.)
我已经四处搜寻，但没有找到任何东西，如果您考虑从"IE7布局错误"中获得多少点击，这也就不足为奇了.搜索.
I've googled around and not found anything, which shouldn't be surprising if you consider how many hits you get from "IE7 layout bug" searches.
推荐答案
这是一个渲染错误. IE6/7没有使用适当的表格显示模型.不幸的是，我不记得这个特定错误的特定名称/标签，而且我似乎也找不到能证实这一点的权威资源.
This is a rendering bug. IE6/7 doesn't use a proper table display model. Unfortunately I can't recall a specific name/label for this particular bug and I can't seem to find authorative resources confirming this.
至少，我找到了两种CSS方法来解决此问题.
At least, I found 2 CSS ways to fix this.
-
最简单的方法是使用
visibility: hidden;而不是display: none;.不幸的是，如果在要转换的列之后之后有更多列或具有表边框，则此方法将无法很好地工作.它仍然留有空间.将position: absolute;添加到.junk可以解决FF中的此问题，但是您又会回到IE中的相同渲染问题.
The easiest, use
visibility: hidden;instead ofdisplay: none;. Unfortunately this doesn't work nicely if you have more columns after the to-be-toggled column or have a table border. It still leaves a space. Addingposition: absolute;to.junkfixes this issue in FF, but you fall back to the same rendering problem in IE.
一种滥用IE错误地为<col>应用样式的功能的黑客.
A hack which abuses the IE's erroneous ability to apply styles for <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中切换实际兴趣的元素:
Alternatively, you can also just toggle the elements of actual interest in jQuery:
$(function() {
$('#click').click(function() {
$('table.compact .junk').toggle(!this.checked);
});
});
这篇关于CSS使其不可见的IE7表格单元格不能通过以后的类更改(??)使其可见.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
