メッセージを表示するために使用しているテーブルの行の高さに関して、興味深い問題があります。要件では、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として報告されます))。
私は公式に困惑しています。