表格行高值与 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”。当您在 Firebug 中检查 <tr> 标记时，它会显示它们的高度为 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...

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