2

メッセージを表示するために使用しているテーブルの行の高さに関して、興味深い問題があります。要件では、7 つを超えるメッセージがある場合div、テーブルを含む全体を 7 つのメッセージの高さにサイズ変更し、スクロール バーをオンにして、残りのメッセージを表示できるようにする必要があると述べています。

JS コード (JQuery) では、ページの準備が整うと、最初にテーブル内のすべての偶数行に「偶数」クラスが適用されます。

JS

 var $table = $('#messageTable');
 $('tr:even', $table).addClass('even');

スタイル

.even {background: none repeat scroll 0 0 #F8F8F8;}

その処理と適用されるクラスは、奇数行と偶数行の唯一の違いです。

その後、テーブル内の行数をチェックし、7 行を超える場合は、最初の 7 行の個々の行の高さを取得し、それらを合計して、親 div の高さをその値に設定します。 、scrollingその div にクラスを追加します。

JS

var $allRows = $('#messageTable tr');

var $totalRowsHeight = 0;

if ($allRows.length > 7) {
    for (var i = 0; i < 7; i++) {
        $totalRowsHeight += $('#messageTable tr:eq(' + i + ')').outerHeight();
    }

    $('#messageTable ').closest('.msgSection').css({'height': $totalRowsHeight +'px'}).addClass('scrolling');
}

スタイル

.scrolling {overflow: auto;}

そして、これがすべて実行された後の結果の HTML 構造です。

<div class="msgSection scrolling" style="height: 266px">
    <table summary="This table shows your messages" id="messageTable">
        <tbody>
            <tr>
                <td class="messageDateWidth">03/14/2013</td>
                <td class="messageWidth">
                    <a name="message_01" href="TARGET_URL_HERE">D000012348</a>
                </td>
            </tr>
            <tr class="even">
                <td class="messageDateWidth">03/13/2013</td>
                <td class="messageWidth">
                    <a name="message_02" href="TARGET_URL_HERE">C000012347</a>
                </td>
            </tr>
            <tr>
                <td class="messageDateWidth">03/12/2013</td>
                <td class="messageWidth">
                    <a name="message_03" href="TARGET_URL_HERE">B000012346</a>
                </td>
            </tr>
            <tr class="even">
                <td class="messageDateWidth">03/12/2013</td>
                <td class="messageWidth">
                    <a name="message_04" href="TARGET_URL_HERE">A000012345</a>
                </td>
            </tr>

            . . .

        </tbody>
    </table>
</div>

それで、すべてうまくいきます。. . JS と CSS は本来の機能を果たします。Firefox を除きます (IE、Chrome、および Safari で動作します)。

Firefox では、この.outerHeight()関数は行ごとに値「38」を返します。 .height()また、.outerHeight(true)「38」を返します。Firebug でタグを調べると、<tr>高さが 38 ピクセルであることがわかります。その 7 倍すると、「266」になります (style="height: 266px"上の HTML の を参照)。

問題は、<div>が 4 ピクセル長すぎることです。

いくつかの調査を行った後、Firefox がすべての奇数行を37ピクセルの高さでレンダリングしていることを発見しました (すべてが 38 ピクセルであると報告しているにもかかわらず)。最初の 7 行には奇数行が 4 行あるため、高さは実際の行セットよりも 4 ピクセル高く計算されます。

奇数行を「偶数」スタイルに設定しようとしました(Firebugを介して手動で、コンソールを介してプログラムで、スタイルが適用されている間、高さは同じ37ピクセルのままです(それでも38として報告されます))。

私は公式に困惑しています。

4

1 に答える 1

1

border-collapse プロパティを適用していますか? その場合、1px の境界線が適用されていると、行間のピクセルが「失われます」。テーブルセルの内側の高さでは考慮されていないため、高さが異なる可能性があります。それに加えて、Firefox の機能であるサブピクセル レンダリングの可能性を追加すると、47.44 の高さを表示しようとしている可能性が非常に高く、48/47 が交互に表示されます。参照:サブピクセルの問題...

表のセルに境界線がない場合、それは本当に答えではありません。ごめん。

于 2013-03-14T19:07:14.400 に答える