关于用于显示消息的表格中行的高度,我遇到了一个有趣的问题。要求规定,如果消息超过 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) .
我正式被难住了。
最佳答案
您是否应用了边框折叠属性?如果是这样,如果应用了 1px 边框,它会在行之间“丢失”一个像素。它不在表格单元格的内部高度中,这可能是高度变化的原因。再加上 Firefox 具有的亚像素渲染潜力,它很可能会尝试显示 47.44 的高度……结果显示为 48/47 交替显示。 参见:Sub-Pixel Problems...
如果您的表格单元格没有边框,那真的不是您的答案。对不起。
关于jquery - 表格行高值与Firefox中实际显示高度不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15417208/