html - TD 琐碎的修复需要永远

Question

我花了 2 天的时间试图弄清楚为什么这个 td 的高度比它应该的高，我知道这可能是我几乎无法观察到的微不足道的事情。

这是 HTML 在检查器中的样子:

请注意高度是 50px 但 td 没有响应

即使图像高度是 50px :)

5px 从何而来？

Answer 1

问题的简单演示:

<table><tr><td style="border: solid red 1px; padding:0"><img 
  src=http://lorempixel.com/54/50/ alt=""></table>

绘制单元格边框后，您可以看到图像下方有空间。它保留给字母的后代，即使没有真正的字母出现——内容仍然被视为文本。

最简单的修复方法是将以下内容添加到样式表:

td img { display: block; }

这会导致图像被设置为一个简单的 block ，而不是被视为位于文本基线上的元素文本(可以说是一个大字母)。