5

这是两个测试文件：

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 响应生成的表格周围，所以它会很大我宁愿避免混乱。（该表实际上也是一个表；它是表格信息的显示，而不是布局技巧。）

我四处搜索并没有发现任何东西，如果您考虑从“IE7 布局错误”搜索中获得多少点击，这应该不足为奇。

4

2 回答 2

2

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

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

问题出在你的选择器上。切换compact不会增加junk.

于 2010-06-19T21:44:29.060 回答
2

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

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

  1. 最简单的，使用visibility: hidden;代替display: none;. 不幸的是，如果您在要切换的列之后有更多列或有表格边框，这将不能很好地工作。它仍然留有空间。添加position: absolute;到.junkFF 中修复了此问题，但您在 IE 中回退到相同的渲染问题。

  2. 一种滥用 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);
    });
});
于 2010-06-20T01:35:14.450 回答