Jquery 表行高度值与Firefox中的实际显示高度不同

关于我用来显示消息的表中的行的高度，这里有一个有趣的问题。该要求规定，如果有7条以上的消息，则包含表格的整个

div

应调整为7条消息的高度，并打开滚动条，以允许查看其余消息

在JS代码（JQuery）中，一旦页面准备就绪，它首先将“偶数”类应用于表中的每个偶数行

JS

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

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');
}

风格

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

.scrolling {overflow: auto;}

处理和应用类是奇数行和偶数行之间的唯一区别

完成后，它会检查表中的行数，如果行数超过7行，它会捕获前7行中每一行的高度，将它们相加，将父div的高度设置为该值，并将

滚动

类添加到该div

JS

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

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');
}

这是运行完所有这些之后得到的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>

03/14/2013
03/13/2013
03/12/2013
03/12/2013
. . .

所以，一切都很好。JS和CSS只做他们应该做的事情。Firefox除外（适用于IE、Chrome和Safari）

在Firefox中，

.outerHeight（）

函数为每一行返回一个值“38”

.height（）

和

.outerHeight（true）

也返回“38”。当你检查Firebug中的

标签时，它说它们有38像素高。如果乘以7，则得到“266”（请参见上面HTML中的

style=“height:266px”

）

问题是，

太长了4个像素

在做了一些调查之后，我发现Firefox将所有的奇数行渲染为37像素高（尽管所有报道都说它们是38像素）。由于前7行中有4个奇数行，因此高度计算为比实际行集高4个像素

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

---

我被正式难住了。

您是否应用了边界折叠属性？如果是，它将“丢失”如果应用了1px边框，行与行之间的像素。在表格单元格的内部高度中不考虑该像素，这可能是高度变化的原因。此外，Firefox还具有亚像素渲染的潜力，它很可能尝试显示47.44的高度……结果显示为交替48/47。 见：

---

如果您的表格单元格上没有边框，这真的不是一个答案。抱歉。

这很可能是相关的。每一行都有一个1像素的底部边框，全局表格样式设置为

边框折叠：折叠；边框间距：0；

。但不确定为什么它只会影响奇数行。在Firebug中更新它没有似乎会影响它，但我将尝试使用此特定表的样式更新代码，并查看它是否在页面呈现上修复了它（开发环境…只需更改代码并点击“重新加载”：（）.好的，我找到了一种本地测试它的方法，并将表重置为使用

边框折叠：separate；

并将表的属性设置为

cellspacting=“0”

似乎已经稳定了所有浏览器的渲染高度。当然，现在我得到了它们之间的高度计算差异，但至少渲染是一致的。非常感谢。：）拍摄……有人用特定于Firefox的高度计算更改了JS（试图解决同样的问题）没有告诉我。一旦我删除它，新方法就不会产生任何初始影响。接下来我将研究“亚像素”问题。谢谢……好的，我开始使用。代码循环时，每行上的偏移量，Firefox肯定会“处理”该行37.5像素的高度。看起来你用“交替行高”问题。看来我得想办法解决一些棘手的问题了。：/谢谢你给我指明了正确的方向。：）