jquery - 表格行高值与Firefox中实际显示高度不同

Question

关于用于显示消息的表格中行的高度，我遇到了一个有趣的问题。要求规定，如果消息超过 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”。当您检查 <tr> Firebug 中的标签，它表示它们有 38 像素高。当你乘以 7 时，你得到“266”(参见上面 HTML 中的 style="height: 266px")。

问题是，<div> 4 个像素太长了。

经过一些调查，我发现 Firefox 将所有奇数行渲染为 37 像素高(尽管所有报告都显示它们为 38)。由于前 7 行中有 4 个奇数行，因此计算的高度比实际行集高 4 个像素。

我已经尝试将奇数行设置为“偶数”样式(通过 Firebug 手动设置，以及通过控制台以编程方式设置，并且在应用样式时，高度保持在相同的 37 像素(并且仍然报告为 38) .

我正式被难住了。

Answer 1

您是否应用了边框折叠属性？如果是这样，如果应用了 1px 边框，它会在行之间“丢失”一个像素。它不在表格单元格的内部高度中，这可能是高度变化的原因。再加上 Firefox 具有的亚像素渲染潜力，它很可能会尝试显示 47.44 的高度……结果显示为 48/47 交替显示。参见:Sub-Pixel Problems...

如果您的表格单元格没有边框，那真的不是您的答案。对不起。