5

2 つのテスト ファイルを次に示します。

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

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

これら 2 つのページのマークアップはすべてほぼ同じです。2 つの列を持つテーブルがあります。1 つの列 (2 番目の列) の要素と要素には、すべて「ジャンク」クラスが与えられます<th>。<td>

「良い」ページをロードすると、上部のチェックボックスがオフになっていることがわかります。チェックボックスをオンにすると、2 列目が非表示になります。チェックを外すと、2 番目の列が戻ります。「悪い」ページでは、チェックボックスがオンになっています。チェックを外しても IE7 では効果がありませんが、基本的な悪に取り憑かれていない他のブラウザーでは機能します。

<table>チェックボックスは、タグからクラス「コンパクト」を追加または削除するだけの小さな Javascript ルーチンにフックされています。これを含むスタイルシートがあります：

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

したがって、何が起こるべきかは、「良い」ページで何が起こるかです。ただし、IE7（おそらく6も）では、最初にレンダリングされたときに非表示になるようにスタイル設定されているようにテーブル要素が開始された場合、新しいスタイルルールをもたらすDOMへのその後の変更に関係なく、表示されることはありません有効にし、それらを表示したままにします。(これは特にパーツの問題のようです。私は他の要素で同じメカニズムを使用しており、それらはすべて正常に動作します。)<table>

では、問題は、このばかげた動作を回避するために使用できるハックを知っている人はいますか? 明らかに、テーブル セルが表示されるように、関連するトグル コントロール セットを使用して IE7 のビューを開始するように調整することもできますが、私の場合、これは AJAX 応答として生成されたテーブルの周りで発生するため、大きな問題になります。混乱は避けたいです。(テーブルも実際にはテーブルです。レイアウト ハックではなく、表形式の情報の表示です。)

「IE7 レイアウト バグ」検索から得られるヒット数を考えれば、驚くべきことではありません。

4

2 に答える 2

2

これはレンダリングのバグです。IE6 / 7は、適切なテーブル表示モデルを使用していません。残念ながら、この特定のバグの特定の名前/ラベルを思い出せず、これを確認する信頼できるリソースを見つけることができないようです。

少なくとも、これを修正する2つのCSSの方法を見つけました。

  1. 最も簡単なのは、のvisibility: hidden;代わりに使用してdisplay: none;ください。残念ながら、これは、切り替える列の後に列が多い場合やテーブルの境界線がある場合はうまく機能しません。それはまだスペースを残します。を追加position: absolute;すると.junk、FFでこの問題が修正されますが、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 に答える
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 に答える