Question

一定是蠢事，但到目前为止我无法理解......

这是我的HTML：

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td style="height: 8px"><img src="/media/note2.png" width="8" height="8" border="0"></td>
    <td style="height: 8px"></td>
    <td style="height: 8px"><img src="/media/note1.png" width="8" height="8" border="0"></td>
</tr>
<tr>
    <td class="NoteCell"></td>
    <td class="NoteCell">{{ text }}</td>
    <td class="NoteCell"></td>
</tr>
<tr>
    <td style="height: 8px"><img src="/media/note4.png" width="8" height="8" border="0"></td>
    <td style="height: 8px"></td>
    <td style="height: 8px"><img src="/media/note3.png" width="8" height="8" border="0"></td>
</tr>

我希望第一行和第三行的高度为8像素，但由于某些原因它们要高得多（就好像里面有文字，但没有文字！）

困惑......任何帮助都将不胜感激！

Answer 1

尝试td img { display: block; }

Answer 2

第1行和第3行的第二列定义最小高度的原因。

请注意，行中的所有列都具有相同的高度，并且列中的所有行都具有相同的宽度。

这就是表格的呈现方式。

所以，你必须另外写：

td { font-size: 8px; }

编辑：修正fontsize至font-size

Answer 3

提示1.将代码段粘贴到空的html页面中，找出问题是否仍然存在，确保doc类型与目标页面相同。

提示2.使用带有CSS调试工具的浏览器扩展，检查并摆弄应用于单元格中的表行，单元格和图像的css。

提示3.您可以尝试通过添加所有这些来帮助其中一个：

table {border-collapse:collapse;table-layout:fixed}
td,tr {padding:0}
td img {margin:0;height:8px}

如果有帮助，则意味着样式表中的其他定义会使单元格或行更高。通过逐个删除我的CSS建议，您可以找出导致它的原因。

Answer 4

我遇到了类似的问题，vertical-align:top;为我做了诀窍。

如何防止过高？

4 个答案: