如何在 HTML5 中调整表格行高答案

【问题标题】：How to adjust table row height in HTML5如何在 HTML5 中调整表格行高
【发布时间】：2012-02-05 14:41:54
【问题描述】：

我浏览了该网站，但找不到任何可以解决这个与 html5 相关的特定问题的内容。虽然我总是有可能忽略它......如何使用 html5 在表格中获得 1px 的行高？以下代码在 html 4.01 中按预期工作（我投入了包括厨房水槽在内的所有内容，试图在 html5 中使行高仅为 1px，并添加了背景颜色以显示表格行）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>
<body style="background-color:#F3F3F3;">
    <table style='width:500px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; margin:0px;'>
        <tr style="line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
            <td style="background-color:red; line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
                <img style="width:100%; height:1px;" src="/images/pixsolid.gif" alt=''>
            </td>
        </tr>
    </table>
</body></html>

它显示为 1 像素高的行。

但如果我使用相同的代码，其文档类型为：

<!DOCTYPE html>

它显示为一个 6 像素高的行...前 5 个像素的背景颜色为红色，然后是 1 像素高的图像行。（我会发布实际图片，但我是新来的，StackOverflow 不会让新手发布图片。）

在最新版本的 Firefox、Chrome 和 IE 中，问题似乎相同，所以我想我遗漏了一些东西......

任何建议将不胜感激。

【问题讨论】：

对于它的价值，在我的计算机上运行 Safari 6.0.2，我得到了 HTML5 文档类型和 HTML4 过渡文档类型完全相同的结果。我看到两者都是红色的 1px 背景。

标签： html html-table row

【解决方案1】：

我在只包含图像的 HTML 表格中遇到了同样的问题。将文档类型更改为 HTML 5 后，Chrome、Firefox 和 IE 显示的表格单元格高度大于图像，而之前的单元格与它们包含的图像一样大。

似乎对于 HTML 5，浏览器会将表格单元格的大小设置为不小于您的 font-size 和 line-height 允许的文本内容。因此，为了获得与之前相同的外观，我使用了以下内联 CSS 规则：

<table style="font-size: 1px; line-height: 0;">
...
</table>

【讨论】：

【解决方案2】：

您是否尝试过删除所有额外的内联 CSS 并尝试这样做？

另外，see this question

无论如何，您正在从 HTML 4 过渡文档类型更改为 HTML 5，因此您可能可以在 the HTML5 specs 中找到答案。

但是，如果您不想大量阅读，这里有一些建议：我看到人们使用 em 代替 px 取得了成功。您的问题是，在某些情况下，行高在 HTML5 中的显示与在 4-transitional 中的显示不同。尝试删除所有内联 CSS（最好添加样式表！！），然后慢慢添加并使用填充等，可能会发现您的问题。

【讨论】：

您指出的问题似乎不适用于表格行（尝试了一些变体）。关于内联 CSS，我尝试添加/减去大部分内容。不要仅仅为了解决问题而使用样式表。在生产代码中使用了样式表。
据我所见，这不是表格行或 div 或 p 标签的问题，而是浏览器如何解释和运行 HTML5 文档类型，特别是关于行高和字体大小.

【解决方案3】：

在将旧应用程序切换到 HTML5 后，我今天遇到了同样的问题。表格单元格中有成千上万的透明图像（trans.gif）出现，并且用于定义 tr 高度的 img height 属性。

我写了一个基于 jQuery 的 javascript 函数，它在 docReady 上执行，它对我来说很好用。也许您必须根据需要对其进行调整（例如图像名称）：

function fixTransGifHeight()
{
    // HTML5 td height is oriented on font-size, now
    var src;
    var height;
    var parent;
    $('img').each(function() {
        src = $(this).attr('src').toUpperCase();
        height = parseInt($(this).attr('height'));

        if(src.indexOf('TRANS.GIF') > -1) {
            parent = $(this).parent();
            if(parent.is('td')) {
                parent.css('line-height', height + 'px');
                parent.css('font-size', height + 'px');
            }
        }
    });
}

【讨论】：