Question

我正在使用表格来显示表格数据，但我需要将尺寸调整像素完美，这样内容最终不会占用比我更多的垂直空间。另外，单独使用css的布局是不可行的，因为我有很多元素。

这是我的简单测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, td, tr, thead, tfoot, tbody, th, tf {
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
    border:0;
    line-height:16px;
}
</style>
</head>
<body>
    <table border="0" cellspacing="0" cellpadding="0">
        <tr style="height:16px">
        <td>
            <span style="font-size:10pt;">Here is some text</span>
        </td>
        </tr>
    </table>
</body>
</html>

基本上我希望表中的行只占用16px，但是，在这种配置中它最终需要17px。

检查FireBug中的元素，它显示的是15px的跨度，但是17和t的td和tr，但是没有填充，没有边框等......

firebug table inline

在IE中，我得到了相同的行为，但是有更多关于我神秘的额外像素的信息，似乎在span元素上有一个偏移：

ie table inline offset

最后，我可以通过将我的span元素转换为div来解决问题，（或者通过使span元素显示：block，甚至display：table-cell我真的不明白）。所以我真的不需要帮助解决我的问题，但我想理解为什么表格单元格中的内联元素最终会占用更多的空间。我尝试了谷歌和w3c规范，但找不到任何有用的东西。

Answer 1

~~可能是跨度的行高吗？~~

编辑：我意识到我并没有真正回答这个问题。我在Firebug中做了一些探测（我在Mac上，所以暂时无法访问IE），看起来这不是跨度本身推动单元格的高度，但是td的行高确实如此最终控制td的高度。跨度的高度仅为14px。我怀疑它是推动高度的空文本节点（在IE的开发工具中显示）。查看此方法的一种方法是将字体大小规范向上移动一个或两个节点，以便它也将应用于空文本节点。至少在FB中似乎解决了这个问题并证明了跨度不是问题。（如果你使用div而不是空文本节点？你甚至需要一个span或div，或者你可以在td中找到你的文本吗？）

用于表td内的内联与块元素的框模型

1 个答案: