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

您是否应用了border-collapse属性？如果是这样，如果你应用1px边框，它将“丢失”行之间的像素。在表格单元的内部高度不考虑，这可能是高度变化的原因。再加上Firefox有能力的子像素渲染的潜力，它很可能试图显示47.44的高度......它以48/47交替出现。见：Sub-Pixel Problems...

如果您的桌面小区没有边框，那么这对您来说真的不是一个答案。抱歉。

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

1 个答案: