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”。当您检查<tr>Firebug 中的标签时，它会说它们是 38 像素高。当您乘以 7 时，您会得到“266”（参见style="height: 266px"上面的 HTML 中的）。

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

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

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

我被正式难住了。

4

1 回答 1

1

Do you have a border-collapse property applied? if so, it would "lose" a pixel between rows if you have a 1px border applied. It's not considered in the inner height of the table cell, which could be why the heights vary. Add to that the potential of sub-pixel rendering that Firefox has capability of and it could very well be trying to display a height of 47.44... and it comes out as alternating 48/47. see: Sub-Pixel Problems...

That really isn't an answer for you if you don't have borders on your table cells. Sorry.

于 2013-03-14T19:07:14.400 回答